vite-plugin-svg-sprite-names-typescript

A plugin for extracting symbols' IDs from an SVG sprite and using them to generate an IconName type and an array of strings with the IDs.

Note

This plugin does not generate the SVG sprite, you will need to provide one.

You can create a SVG sprite in the CLI with svg-sprite. See more in Usage.

Alternatively, you can use vite-svg-sprite-wrapper to generate the sprite and the types.

Install

npm i -D vite-plugin-svg-sprite-names-typescript

Usage

Include into your plugins in vite.config.ts

import { defineConfig } from "vite";
import { generateIconNames } from "vite-plugin-svg-sprite-names-typescript";

export default defineConfig({
  plugins: [
    generateIconNames({
      svgFilePath: "./public/sprite.svg",
      typesFilePath: "./src/types/icon-names.ts",
      typeName: "IconName",
    }),
  ],
});

Create Svg Sprite with the CLI

If you need to create an svg sprite first, you can do it by using svg-sprite CLI:

npm run svg-sprite -s --symbol-dest [destination folder] --symbol-sprite [sprite filename] [svg icons folder]

For example, to create a svg sprite in public folder with the name sprite.svg from the icons found in src/assets/icons/*.svg, you need to run the following command:

svg-sprite -s --symbol-dest public --symbol-sprite sprite.svg src/assets/icons/*.svg

Example

// main.ts
import { IconNameList } from "./types/icon-names";

const icons = IconNameList;
const svgs = icons
  .map((icon) => {
    return `
    <h2 style="text-transform: capitalize"> 
      <span>${icon} Logo</span>
      <svg style="width: 100%; height:100%">
        <use href="sprite.svg#${icon}"></use>
      </svg>
    </h2>
  `;
  })
  .join("\n");

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <div>
    ${svgs}
  </div>
`;