SVG Sprite Maker
by sorieil
SVG Sprite and TypeScript Enum Generator
FreeFigma
Installs
61
Likes
9
Users
844
Views
1,423
Preview
About this plugin
DescriptionThe SVG Sprite and TypeScript Enum Generator plugin for Figma helps streamline your workflow by automating the process of converting SVG icons into a single sprite sheet and generating corresponding TypeScript enum code. This plugin is designed for developers and designers who want to optimize their projects with efficient SVG handling and seamless TypeScript integration.FeaturesSVG Sprite Generation: Automatically compile multiple SVG icons into a single sprite sheet.TypeScript Enum Generation: Generate TypeScript enum code corresponding to the SVG icons for easy reference in your codebase.User-friendly Interface: Intuitive and easy-to-use interface for quick and efficient sprite and enum generation.How to use// SVGIcons.tsxtype SVGIconProps = {icon: SVGIconswidth: numberheight: numberactive: boolean}/*** Renders an SVG icon.* The SVGSprite.tsx file must be declared at the top level of the project page.* @param {SVGIcons} props.icon - The name of the icon to render.* @param {number} props.width - The width of the SVG element.* @param {number} props.height - The height of the SVG element.* @returns {JSX.Element} The rendered SVG icon.*/const SVGIcon = ({icon,width,height,...rest // Rest operator to capture additional props}: Partial): JSX.Element => {return ()}export default SVGIcon// SVGSprite.tsxexport enum SVGIcons {SAMPLE_ICON = 'sample_icon',}const SVGSprite = () => {return ()}export default SVGSprite// use// Before using the component, you must first call the component in the global scope.
More software development plugins
View allBuilder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
by Steve Sewell
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
410.3K 23.4K
Anima: Convert Figma to HTML/CSS/React/Tailwind,Vibe code,DevMode Inspect/Run React/HTML,App builder
by Anima
Anima - AI Design to code, Vibe code, Vibe design
400.6K 17.8K
SkewDat
Paidby Unfold
Skew any layer or group with all layers preserved to edit.
276K 7.3K
Zeplin
Paidby Zeplin Crew
Design tools are for designing. Zeplin is for clear, structured design delivery.
183.3K 2.9K