Back to Plugins
VectorSymbols
Fast, easy and practical powerful icon production and batch export tool.
iconsvectorsvgvectorexportsymbolsweb
Plugin Preview
About this plugin
How it works
Library
Selection
Select 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 rule
It 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 settings
- Export 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.
Export
- IconsName-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
<!DOCTYPE html>
<html>
<body>
<svg id='Icons' xmlns='http://www.w3.org/2000/svg' style='display:none'>
<style>svg{--icons_dark_accent_s: #20D5EC;}</style>
<symbol id='icons_icon_person_fill' viewBox='0 0 48 48'>
<path fill-rule='evenodd' clip-rule='evenodd'
d='M24 4C18.48 4 14 8.48 14 14C14 19.52 18.48 24 24 24C29.52 24 34 19.52 34 14C34 8.48 29.52 4 24 4zM24 27C13.06 27 7 34.92 7 41.44C7 45 9 45 16 45L32 45C39 45 41 45 41 41.44C41 34.92 34.94 27 24 27z' />
</symbol>
<symbol id='icons_icon_person_arrow_left_right' viewBox='0 0 48 48'>
<path fill-rule='evenodd' clip-rule='evenodd'
d='M29.001 14C29.001 8.48 24.531 4 19.001 4C13.481 4 9.001 8.48 9.001 14C9.001 19.52 13.481 24 19.001 24C24.531 24 29.001 19.52 29.001 14zM13.001 14C13.001 10.69 15.691 8 19.001 8C22.321 8 25.001 10.69 25.001 14C25.001 17.31 22.321 20 19.001 20C15.691 20 13.001 17.31 13.001 14z'
fill='var(--icons_dark_accent_s)' />
<path
d='M24 27.613C22.459 27.211 20.789 27 19.001 27C8.721 27 2.351 33.99 2.021 44C2.001 44.55 2.451 45 3.001 45L5.001 45C5.561 45 6.001 44.55 6.021 44C6.321 36.16 10.921 31 19.001 31C20.853 31 22.523 31.271 24 31.782C24 30.392 24 29.003 24 27.613z'
fill='var(--icons_dark_accent_s)' />
<path
d='M41.5 30.65L29 30.65C28.448 30.65 28 30.202 28 29.65L28 28.35C28 27.798 28.448 27.35 29 27.35L41.5 27.35L38.644 24.87C38.206 24.49 38.182 23.818 38.592 23.408L39.46 22.54C39.85 22.15 40.483 22.15 40.874 22.54L46.167 27.833C46.811 28.478 46.811 29.522 46.167 30.167L40.874 35.46C40.483 35.85 39.85 35.85 39.46 35.46L38.592 34.592C38.182 34.182 38.206 33.51 38.644 33.13L41.5 30.65z'
fill='var(--icons_dark_accent_s)' />
<path
d='M30.5 39.35L43 39.35C43.552 39.35 44 39.798 44 40.35L44 41.65C44 42.202 43.552 42.65 43 42.65L30.5 42.65L33.356 45.13C33.794 45.51 33.818 46.182 33.408 46.592L32.54 47.46C32.15 47.85 31.517 47.85 31.126 47.46L25.833 42.167C25.189 41.522 25.189 40.478 25.833 39.833L31.126 34.54C31.517 34.15 32.15 34.15 32.54 34.54L33.408 35.408C33.818 35.818 33.794 36.49 33.356 36.87L30.5 39.35z'
fill='var(--icons_dark_accent_s)' />
</symbol>
</svg>
<svg width="48" height="48" fill="#121212">
<use xlink:href="#icons_icon_person_arrow_left_right" />
</svg>
</body>
</html>
Production
Constraints
Support one-click setting of x, y axis (scale, center) constraints.
Stroke width
The 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 tag
You can bulk add text fields to icon components, which makes them easier to search for.
Plugin Details
| Version | 2 |
|---|---|
| Created | June 28, 2023 |
| Last Updated | July 29, 2023 |
| Category | Import & export plugins |
| Creator | CuriosityWen |
| Stats | 719 installs, 40 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:build/ui.js
- main:build/main.js
- Editor Types:figma
More Like This
Discover other plugins in the Import & export plugins category.