相信大家都使用过SVG图标,但是如果一个个的去使用又非常的麻烦,那么有没有简单的办法呢?
1.如何在项目中优雅的使用SVG图标
补充概念:
1.png
图标可以使用精灵图技术,根据定位使用
2.svg
图片是xml格式,打包成svg地图
,通过ID使用,无需import引入
使用步骤:
- 下载
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>