npmpackage.info

Gathering detailed insights and metrics for vite-plugin-svg-icons

Other packages similar to vite-plugin-svg-icons

vite-plugin-svg-icons-ng

1.4.0

Vite plugin for easily creating an SVG sprite and injecting it for use, with a brand-new version.

@digitalacorn/vite-plugin-svg-icons

3.0.0-pre.2

Vite Plugin for fast creating SVG sprites.

vite-plugin-svg-spritemap

1.0.8

Generates a SVG spritemap from multiple .svg files

vite-plugin-svgs-icons

1.0.10

vite-plugin-svgs-icons svg-icon svg icon MultiColor修改

Gathering detailed insights and metrics for vite-plugin-svg-icons

vite-plugin-svg-icons - 2.0.1 | npmpackage.info

vite-plugin-svg-icons

Vite Plugin for fast creating SVG sprites.

2.0.1

887

MIT

TypeScript

385.53 kB

2.7

Installations

npm install vite-plugin-svg-icons

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

16.13.2

NPM Version

8.1.2 Score

63.5

Supply Chain

45.3

Quality

68.3

Maintenance

Vulnerability

98.2

License

Pull Requests

Open

10

Total

23

Closed

4

Merged

9

Issues

Open

58

Total

99

Closed

41

Releases

v2.0.1

Updated on Jan 29, 2022

v2.0.0

Updated on Jan 28, 2022

v1.0.1

Updated on Jul 06, 2021

v1.0.0

Updated on Jun 25, 2021

v0.4.2

Updated on Apr 16, 2021

v0.4.1

Updated on Apr 03, 2021

View All 10 releases

Languages

TypeScript

Vue

Shell

HTML

TypeScript (84.95%)

Vue (8.89%)

Shell (3.72%)

HTML (2.45%)

Developer

anncwb

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

887 Stars

74 Commits

121 Forks

4 Watchers

1 Branches

10 Contributors

Updated on May 05, 2025

Bundle Size

1.43 MB

Minified

385.53 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 10 Contributors

Package Meta Information

Latest Version

2.0.1

Package Id

vite-plugin-svg-icons@2.0.1

Unpacked Size

18.90 kB

Size

4.58 kB

File Count

NPM Version

8.1.2

Node Version

16.13.2

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

vite-plugin-svg-icons

English | 中文

Used to generate svg sprite map.

Feature

Preloading All icons are generated when the project is running, and you only need to operate dom once.
High performance Built-in cache, it will be regenerated only when the file is modified.

Installation (yarn or npm)

node version: >=12.0.0

vite version: >=2.0.0

1yarn add vite-plugin-svg-icons -D
2# or
3npm i vite-plugin-svg-icons -D
4# or
5pnpm install vite-plugin-svg-icons -D

Usage

Configuration plugin in vite.config.ts

1import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
2import path from 'path'
3
4export default () => {
5  return {
6    plugins: [
7      createSvgIconsPlugin({
8        // Specify the icon folder to be cached
9        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
10        // Specify symbolId format
11        symbolId: 'icon-[dir]-[name]',
12
13        /**
14         * custom insert position
15         * @default: body-last
16         */
17        inject?: 'body-last' | 'body-first'
18
19        /**
20         * custom dom id
21         * @default: __svg__icons__dom__
22         */
23        customDomId: '__svg__icons__dom__',
24      }),
25    ],
26  }
27}
28

Introduce the registration script in src/main.ts

1import 'virtual:svg-icons-register'

Here the svg sprite map has been generated

How to use in components

Vue way

/src/components/SvgIcon.vue

1<template>
2  <svg aria-hidden="true">
3    <use :href="symbolId" :fill="color" />
4  </svg>
5</template>
6
7<script>
8import { defineComponent, computed } from 'vue'
9
10export default defineComponent({
11  name: 'SvgIcon',
12  props: {
13    prefix: {
14      type: String,
15      default: 'icon',
16    },
17    name: {
18      type: String,
19      required: true,
20    },
21    color: {
22      type: String,
23      default: '#333',
24    },
25  },
26  setup(props) {
27    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
28    return { symbolId }
29  },
30})
31</script>

Icons Directory Structure

1# src/icons
2
3- icon1.svg
4- icon2.svg
5- icon3.svg
6- dir/icon1.svg

/src/App.vue

1<template>
2  <div>
3    <SvgIcon name="icon1"></SvgIcon>
4    <SvgIcon name="icon2"></SvgIcon>
5    <SvgIcon name="icon3"></SvgIcon>
6    <SvgIcon name="dir-icon1"></SvgIcon>
7  </div>
8</template>
9
10<script>
11import { defineComponent, computed } from 'vue'
12
13import SvgIcon from './components/SvgIcon.vue'
14export default defineComponent({
15  name: 'App',
16  components: { SvgIcon },
17})
18</script>

React way

/src/components/SvgIcon.jsx

1export default function SvgIcon({
2  name,
3  prefix = 'icon',
4  color = '#333',
5  ...props
6}) {
7  const symbolId = `#${prefix}-${name}`
8
9  return (
10    <svg {...props} aria-hidden="true">
11      <use href={symbolId} fill={color} />
12    </svg>
13  )
14}

Icons Directory Structure

1# src/icons
2
3- icon1.svg
4- icon2.svg
5- icon3.svg
6- dir/icon1.svg

/src/App.jsx

1import SvgIcon from './components/SvgIcon'
2
3export default function App() {
4  return (
5    <>
6      <SvgIcon name="icon1"></SvgIcon>
7      <SvgIcon name="icon1"></SvgIcon>
8      <SvgIcon name="icon1"></SvgIcon>
9      <SvgIcon name="dir-icon1"></SvgIcon>
10    </>
11  )
12}

Get all SymbolId

1import ids from 'virtual:svg-icons-names'
2// => ['icon-icon1','icon-icon2','icon-icon3']

Options

Parameter	Type	Default	Description
iconDirs	`string[]`	-	Need to generate the icon folder of the Sprite image
symbolId	`string`	`icon-[dir]-[name]`	svg symbolId format, see the description below
svgoOptions	`boolean｜SvgoOptions`	`true`	svg compression configuration, can be an objectOptions
inject	`string`	`body-last`	svgDom default insertion position, optional `body-first`
customDomId	`string`	`__svg__icons__dom__`	Customize the ID of the svgDom insert node

symbolId

icon-[dir]-[name]

[name]:

svg file name

[dir]

The svg of the plug-in will not generate hash to distinguish, but distinguish it by folder.

If the folder corresponding to iconDirs contains this other folder

example:

Then the generated SymbolId is written in the comment

1# src/icons
2- icon1.svg # icon-icon1
3- icon2.svg # icon-icon2
4- icon3.svg # icon-icon3
5- dir/icon1.svg # icon-dir-icon1
6- dir/dir2/icon1.svg # icon-dir-dir2-icon1

Typescript Support

If using Typescript, you can add in tsconfig.json

1// tsconfig.json
2{
3  "compilerOptions": {
4    "types": ["vite-plugin-svg-icons/client"]
5  }
6}

Note

Although the use of folders to distinguish between them can largely avoid the problem of duplicate names, there will also be svgs with multiple folders and the same file name in iconDirs.

This needs to be avoided by the developer himself

Example

Run

1
2pnpm install
3cd ./packages/playground/basic
4pnpm run dev
5pnpm run build
6

Sample project

Vben Admin

License

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.7

/10

Last Scanned on 2025-05-05

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vite-plugin-svg-icons

Other packages similar to vite-plugin-svg-icons

vite-plugin-svg-icons

Installations

Developer Guide

Yes

CommonJS, ESM

16.13.2

8.1.2

Score

Pull Requests

10

23

4

9

Issues

58

99

41

Releases

Languages

Developer

anncwb

Download Statistics

GitHub Statistics

Bundle Size

1.43 MB

385.53 kB

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

vite-plugin-svg-icons

Feature

Installation (yarn or npm)

Usage

How to use in components

Vue way

Icons Directory Structure

React way

Icons Directory Structure

Get all SymbolId

Options

Typescript Support

Example

Sample project

License

10

10

10

2

0

0

0

0

0

0

0

0

0

2.7

/10