Back to Plugins
SVG Sprite Maker

SVG Sprite Maker

SVG Sprite and TypeScript Enum Generator

enumsvgenumeratorsprite mapsprite export

Plugin Preview

SVG Sprite Maker 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.

Plugin Details

Version6
CreatedMay 28, 2024
Last UpdatedMay 30, 2024
CategorySoftware development
Creatorsorieil
Stats52 installs, 8 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none