vue3+vite Method of displaying local svg icons using vite-plugin-svg-icons plugin

Use vite-plugin-svg-icons plugin to display local svg icon

1. Install vite-plugin-svg-icons plugin

npm i fast-glob@ -D
npm i vite-plugin-svg-icons@ -D

2. Use vite-plugin-svg-icons plugin

2.1 Search and configure in the project root directory

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
const path = require('path');
function resolve(dir) {
  return (__dirname, dir);
}
export default {
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // Specify the icon folder that needs to be cached      iconDirs: [((), 'public/img/svg')],
      // Specify the symbolId format      symbolId: 'icon-[name]',
    }),
  ],
 }

2.2 Vite-plugin-svg-icons plugin is introduced

import 'virtual:svg-icons-register'

2.3 Put the svg icon in the corresponding path~~~~~ The icon path is consistent with the path set by iconDirs

Examples of use in the project:
//It is the svg image name in the path

<svg aria-hidden="true" style="width: 14px; height: 14px">
	<use :href="`#icon-${}`" rel="external nofollow"  />
</svg>

This is the article about how to display local svg icons using the vite-plugin-svg-icons plug-in. This is the end of this article. For more related contents of vite-plugin-svg-icons plug-in to display svg icons, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!