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.
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.
// 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} />
