VectorSymbols

How it worksLibrarySelectionSelect component or framework nodes with vector layers included in them. Vector layers must have color fill, multi-layer fill and gradient fill are not supported.Fill ruleIt refers to the fill-rule of a path (SVG).Nonzero: Better client compatibility, and shorter string lengths.Evenodd: Better contextual semantics and more flexible post-adjustment.Export settingsExport name: Compression file name, icon ID and CSS global variable prefix.Round: The precision of the path coordinate points should be no less than 3 decimal places.ExportIconsName-symbol.svg: SVG Symbol file. It will convert your color styles to CSS global variables. If you have any unfilled icons, you will need to use the "fill" attribute to fill them.IconsName.json: The original data structure of the icons, which can be used as a basis for customization.src: The SVG files that include CSS global variable styles..Upcoming support for React component exports and Figma Variables.SVG Symbol Example ProductionConstraintsSupport one-click setting of x, y axis (scale, center) constraints.Stroke widthThe tool presets line segments of different thicknesses, and you can also click the "+" in the upper right corner to create other line thicknesses. Closed paths also support setting the direction of the line segments.Component tagYou can bulk add text fields to icon components, which makes them easier to search for.