Variable Icons
An easy way to convert SVG icons to components with variables.
Plugin Preview
About this plugin
Convert selected SVG icons into components while assigning variables for streamlined design control.Currently, the plugin supports only line icons using stroke color.BenefitsCentralized icon styling with variables and modes.Optimized icon components for instance swaps.Tailored for Lucide Icons.Video TutorialWatch a quick demo to see the plugin in action.FeaturesAssigns variables to:Width and height of selected framesStroke weight of the shapes of selected framesStroke color of the shapes of selected framesSets selected frames to auto-layout modePositions the shapes of selected frames in absolute modeConverts selected frames into componentsSaves assigned variables as preferences within the pluginLimitationsLocal Variables Only: The plugin supports only local variables. Shared library assets are not recognized, but local variables with alias values from remote libraries will work.Stroke Icons Only: Filled-style icons are not supported for stroke weight and stroke color variable assignments.Flattened Shapes Only: Icons containing ovals, rectangles, text, or groups will not have variables assigned.FeedbackI’m a solo designer who learned coding with AI tools. This plugin has proved useful in my workflow, but I’m eager to hear how it fits into yours.Comments and suggestions are welcome!Share your thoughts belowOr email me: domas dot markevicius at me dot com
Plugin Details
| Version | 1 |
|---|---|
| Created | November 26, 2024 |
| Last Updated | December 10, 2024 |
| Category | File organization plugins |
| Creator | Domas Markevičius |
| Stats | 44 installs, 9 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- https://domasmark.us
- https://fonts.googleapis.com/
- https://fonts.gstatic.com
More Like This
Discover other plugins in the File organization plugins category.