Icons

SVG files

For source svg, please follow these rules:

• file name should follow this format: {component_name}_{size_number}.svg
  • If component is called SomeIcon, the svg files show be called some_16.svg, some_20.svg, etc.
  • If component is called CoolAssetOutlineIcon, the svg files show be called cool-asset-outline_16.svg, cool-asset-outline_20.svg, etc.
• svg content should not contain fill, view-box, even-odd or stroke attributes
  • remove fill and view-box attributes manually or use a script
  • ask designer to export source svg without even-odd and stroke attributes
• svg root element should contain only xmlns, width and height attributes
• paths should be merged in most cases - except when you have to animate or apply certain styles to different parts. You may use svgo service or use a script

Optimize script

To automatically convert svg files from Figma to the right format, you may use optimize-icons-svg script from rescui-scripts package:

yarn run rescui-scripts optimize-icons-svg --src-glob "./svg-to-optimize/*"

Other default parameters:

• --src: ./svg
• --clean-out: false

This script cleans up the attributes, merges paths and converts file names to the right format.

Example svg

jet-brains-outline_20.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M6 13.75h5v-1.5H6zM3 3v14h14V3zm1.5 1.5h11v11h-11z"/></svg>

LLM

To get the docs for the LLM, check out this index.