Quick Start

Installation

Prerequisites

• Node.js version 18 or higher LTS.
• Vite version 5 or higher.

Ensure that your workspace is set up correctly by running the following commands:

pnpm

pnpm add -D vite-plugin-svg-icons-ng

npm

npm i -D vite-plugin-svg-icons-ng

yarn

yarn add -D vite-plugin-svg-icons-ng

Usage

Import and configure the plugin in vite.config.ts/vite.config.js

vite.config.ts

// ...
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons-ng'
import path from 'node:path'

export default defineConfig({
  plugins: [
    // ...
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
    }),
  ],
})

vite.config.js

// ...
import path from 'node:path'

export default defineConfig({
  plugins: [
    // ...
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
    }),
  ],
})

Then, Import the virtual module in entry file, like main.ts/main.js.

main.ts

import 'virtual:svg-icons/register' // recommended
import 'virtual:svg-icons-register' // deprecated

main.js

import 'virtual:svg-icons/register' // recommended
import 'virtual:svg-icons-register' // deprecated

WARN

The virtual module virtual:svg-icons-register will be deprecated in the future. Because it doesn't comply with the namespace specification.
You can use import 'virtual:svg-icons/register' instead.

Here, the svg sprite will have been generated. Can use through public component.

Or can use the sprite directly in the HTML.

<svg>
  <use xlink:href="#icon-icon1"></use>
</svg>

Get all SymbolId

Can get all SymbolId through virtual:svg-icons/ids

import ids from 'virtual:svg-icons/ids' // recommended
import ids from 'virtual:svg-icons-names' //deprecated
console.log(ids) // ['icon-icon1','icon-icon2','icon-icon3']

WARN

The virtual module virtual:svg-icons-names will be deprecated in the future. Because it doesn't comply with the namespace specification.
You can use import ids from 'virtual:svg-icons/ids' instead.