Figma Plugin Hub
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

Description

The 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.


Features

SVG 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.tsx
type SVGIconProps = {
icon: SVGIcons
width: number
height: number
active: 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<SVGIconProps>): JSX.Element => {
return (
<svg height={height} width={width} {...rest}>
<use
height={height}
href={`#${icon}`}
width={width}
xlinkHref={`#${icon}`}
/>
</svg>
)
}
export default SVGIcon

// SVGSprite.tsx
export enum SVGIcons {
SAMPLE_ICON = 'sample_icon',
}

const SVGSprite = () => {
return (
<svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol
height="24"
id="sample_icon"
viewBox="0 0 24 24"
width="24"
>
<path
d="M17.6 4H6.4C5 4 4 5 4 6.4V17.6C4 19 5 20 6.4 20H17.6C19 20 20 19 20 17.6V6.4C20 5 19 4 17.6 4Z"
fill="white"
/>
<path
clipRule="evenodd"
d="M6.4 2H17.6C20.1 2 22 3.9 22 6.4V17.6C22 20.1 20.1 22 17.6 22H6.4C3.9 22 2 20.1 2 17.6V6.4C2 3.9 3.9 2 6.4 2ZM6.4 4H17.6C19 4 20 5 20 6.4V17.6C20 19 19 20 17.6 20H6.4C5 20 4 19 4 17.6V6.4C4 5 5 4 6.4 4Z"
fill="#E5E8EB"
fillRule="evenodd"
/>
<circle cx="15.75" cy="8.5" fill="#FFC342" r="2" />
<path
d="M11.27 11.25C11.66 10.84 12.31 10.84 12.71 11.25L17.51 16.23C17.97 16.71 17.63 17.5 16.97 17.5H7C6.34 17.5 6 16.71 6.46 16.23L11.27 11.25Z"
fill="#03B26C"
/>
</symbol>
</defs>
</svg>
)
}

export default SVGSprite

// use
// Before using the <SVGIcon /> component, you must first call the <SVGSprite /> component in the global scope.
<SVGIcon height={20} icon={SVGIcons.SAMPLE_ICON} width={20} />


Plugin Details

Version6
CreatedMay 28, 2024
Last UpdatedMay 30, 2024
CategorySoftware development
Creatorsorieil
Stats22 installs, 3 likes
PricingFree
Install Plugin

Technical Details

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

More Like This

Discover other plugins in the Software development category.

Figma to Code (HTML, Tailwind, Flutter, SwiftUI)

Figma to Code (HTML, Tailwind, Flutter, SwiftUI)

Code Conversion Made Easy: Figma to Web & Apps

Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)

Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)

Anima - AI Powered Design to code

Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)

Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)

Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI

View All Software development Plugins