[icons] icon bugs generated into sketch by plugin

[laurenmrice]

16px,20px build

• We are thinking we just need to add the transparent rectangle code to the assets in icons/src/sv

---

• both 20px and 16px add--filled icons don't have padding around them. Should be like the icon off the artboard.

---

• both 20 and 16 apps icons don't have padding around them.

---

• 20/checkmark--filled is not showing up correctly

---

• 20px arrow--downand arrow--up icon is not centered in the artboard correctly.

---

• 16/interactions does not have padding.

---

• 16/maximize is not centered on the artboard

---

• 20/menu and 16/menu don't have padding and are spaced out too much/thicker stroke. Should look like the icons off the artboard.

---

• 16/nominal is skewed. might be the same problem with the arrows that were fixed some comments above in this pr.

---

• 16/ordinal is skewed

---

• 20/save and does not have padding around it.

[laurenmrice]

@joshblack

[joshblack]

@laurenmrice it seems like most of these issues are with the source SVG assets themselves or a missing the transparent rectangle versus anything with the plugin itself. Is it related to going from AI -> Sketch?

For example, you can copy/paste 16/settings.svg source file and get the same image output that you shared above:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;}
</style>
<title>settings</title>
<path d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3
	c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1
	C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4
	c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4
	c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4
	c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8
	L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6
	C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"/>
<path d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8
	c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"/>
<rect id="_Transparent_Rectangle_" class="st0" width="16" height="16"/>
</svg>

[laurenmrice]

Ahh I see now. Well for the others that are skewing or not showing up with the right padding we can fix. This may be a brand issue? I transferred non skewed/padding icons problems into this other issue: #5758

[joshblack]

@laurenmrice thanks! Do you want me to take up adding in the transparent rectangles, do you want to do it, or should we chip away at it together??

[laurenmrice]

If you could do it that would be great, I am currently trying to work on pictogram renaming convention.

[joshblack]

@laurenmrice ah I might have been too eager 😅 some of these I'm not super sure how to fix, definitely hitting the limit of my Sketch knowledge.

[laurenmrice]

Solution for this would be to remove distinct 16px,20px and 24px icon assets in favor of scaling down from the 32px icon asset. Conrad said he would help look into the remaining batch of distinct icons here to see if any need to be edited: #5597 to resolve this issue.