diff --git a/web/packages/design/src/Icon/Icons/Camera.tsx b/web/packages/design/src/Icon/Icons/Camera.tsx index 9f3759fd6cf8c..f27591cc50c53 100644 --- a/web/packages/design/src/Icon/Icons/Camera.tsx +++ b/web/packages/design/src/Icon/Icons/Camera.tsx @@ -64,7 +64,6 @@ export const Camera = forwardRef( d="M3 5.25a1.5 1.5 0 0 0-1.5 1.5v10.5a1.5 1.5 0 0 0 1.5 1.5h15a1.5 1.5 0 0 0 1.5-1.5v-2.349l3.334 2.223A.75.75 0 0 0 24 16.5v-9a.75.75 0 0 0-1.166-.624L19.5 9.099V6.75a1.5 1.5 0 0 0-1.5-1.5zm16.5 5.651V13.1l3 2V8.9zM3 6.75h15v10.5H3z" clipRule="evenodd" /> - ) ); diff --git a/web/packages/design/src/Icon/Icons/Sun.tsx b/web/packages/design/src/Icon/Icons/Sun.tsx index 6c192876534ec..0d47928b2edb2 100644 --- a/web/packages/design/src/Icon/Icons/Sun.tsx +++ b/web/packages/design/src/Icon/Icons/Sun.tsx @@ -66,7 +66,6 @@ export const Sun = forwardRef( clipRule="evenodd" /> - ) ); diff --git a/web/packages/design/src/Icon/README.md b/web/packages/design/src/Icon/README.md index d6b61dda44adc..26a6b0b0beec0 100644 --- a/web/packages/design/src/Icon/README.md +++ b/web/packages/design/src/Icon/README.md @@ -2,13 +2,25 @@ #### Steps: -1. Download the SVG file of the icon from Google Drive and rename it, ensuring that it is capitalized. This is the name that will be used in the app (eg. `ArrowBack.svg`). - 1. PLEASE NOTE: If you are looking at icons in Figma, _please contact the design team to get an - exported version_. All icons must be converted from vector lines to outlines in order to be - rendered correctly in the product. Exporting an icon without preparing it will cause - unpredictable rendering, such as the fill color not being updated or the entire shape being - filled in with color, rather than just the outlines. +1. Download the SVG file of the icon from Google Drive and rename it, ensuring that it is capitalized. This is the name + that will be used in the app (eg. `ArrowBack.svg`). + 1. PLEASE NOTE: If you are looking at icons in Figma, _please contact the design team to get an + exported version_. All icons must be converted from vector lines to outlines in order to be + rendered correctly in the product. Exporting an icon without preparing it will cause + unpredictable rendering, such as the fill color not being updated or the entire shape being + filled in with color, rather than just the outlines. 2. Add the file to the `assets/` folder in this directory. -3. Run `pnpm process-icons`. +3. Ensure that the icon does not contain unnecessary `clipPath` elements (this will be a single 24x24 rect in a + `clipPath` element). If it does, delete the `g` element (keeping the `path`) that references the `clipPath`, and the + `defs` element that contains the `clipPath`. This is necessary to ensure that the icon optimizes correctly ( + see https://github.com/gravitational/teleport/pull/56614 as an example). +4. Run `pnpm process-icons`. -A full collection of exported icons ready for download can be found in [Google Drive](https://drive.google.com/drive/folders/19068OCcyob6iqjpY3JB4t2NGiRmnuw2D?usp=drive_link). The same icons and others that require preparation before exporting can be found [in Figma](https://www.figma.com/file/Gpjs9vjhzUKF1GDbeG9JGE/Application-Design-System?type=design&node-id=7371-35911&mode=design&t=ior9gA5q20atPjr9-0). +A full collection of exported icons ready for download can be found +in [Google Drive](https://drive.google.com/drive/folders/19068OCcyob6iqjpY3JB4t2NGiRmnuw2D?usp=drive_link). The same +icons and others that require preparation before exporting can be +found [in Figma](https://www.figma.com/file/Gpjs9vjhzUKF1GDbeG9JGE/Application-Design-System?type=design&node-id=7371-35911&mode=design&t=ior9gA5q20atPjr9-0). + +If the collection does not include the icon you need, please contact the Design +team or follow the instructions in the "Icon Consistency" section of the above +Figma link to prepare a new icon. diff --git a/web/packages/design/src/Icon/assets/Camera.svg b/web/packages/design/src/Icon/assets/Camera.svg index 1d65b9c3b933a..074b5e6994a39 100644 --- a/web/packages/design/src/Icon/assets/Camera.svg +++ b/web/packages/design/src/Icon/assets/Camera.svg @@ -1,10 +1,3 @@ - - - - - - - diff --git a/web/packages/design/src/Icon/assets/Sun.svg b/web/packages/design/src/Icon/assets/Sun.svg index 23ba77790472a..78cdba2e4d4b5 100644 --- a/web/packages/design/src/Icon/assets/Sun.svg +++ b/web/packages/design/src/Icon/assets/Sun.svg @@ -1,18 +1,11 @@ - - - - - - - - - - - - - - - - + + + + + + + + +