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 / vite.config.js

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')],
      // other options
    }),
  ],
})

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

main.ts / main.js

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

WARNING !

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

Here, the svg sprite will have been generated and injected into the HTML.
Can use through the public component (Component Examples).

Or can use the sprite directly in the HTML.

<!-- not recommend -->
<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' // recommend
import ids from 'virtual:svg-icons-names' //deprecated
console.log(ids) // ['icon-icon1','icon-icon2','icon-icon3']

WARNING !

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