如何在项目中优雅的使用SVG图标

相信大家都使用过SVG图标，但是如果一个个的去使用又非常的麻烦，那么有没有简单的办法呢?

1.如何在项目中优雅的使用SVG图标

补充概念：

1.png图标可以使用精灵图技术，根据定位使用

2.svg图片是xml格式，打包成svg地图,通过ID使用，无需import引入

使用步骤：

1. 下载svg插件:

yarn add vite-plugin-svg-icons -D

或者

npm i vite-plugin-svg-icons -D

2.配置插件vite.config.ts：

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

// 再 plugins 配置项中新增 createSvgIconsPlugin 配置

export default defineConfig({
    plugins: [
        createSvgIconsPlugin({
            // 指定图标文件夹，绝对路径（NODE代码）
            iconDirs: [path.resolve(process.cwd(), 'src/icons')]
        })
    ]
})

3.导入到 main.ts:

import 'virtual:svg-icons-register'

4.在页面中使用svg图标：

在插入图标的位置,使用herf属性引入图标

    <svg aria-hidden="true">
      <!--    #icon 是固定的    -->
      <!-- #icon-图片所在文件夹名称-图片名称 -->
      <use href="#icon-login--diqiu" />
    </svg>

效果：