Vite 配置 SVG 雪碧图和 SVG 压缩
字数
704 字
阅读时间
4 分钟
需要用到如下工具
| vite-plugin-svg-icons | 用于生成 SVG 雪碧图 |
|---|---|
| svgo | 用于压缩 SVG |
安装依赖
pnpm install -D vite-plugin-svg-icons svgo配置 SVGO
1 - 在 src/icons/ 文件夹下创建 svgo.js 配置文件（注意，新版 svgo 已经不支持 YAML 格式的配置文件了）
src/icons/svgo.js:
javascript
// src/icon/svgo.js
// svg 压缩配置文件
module.exports = {
plugins: [
{
name: 'removeAttrs',
params: {
attrs: '(fill|fill-rule)',
},
},
],
}2 - 在 src/icons/ 目录下新建 filler 文件夹用来存放需要压缩的 SVG，然后创建一个 .gitkeep 文件（这样可以避免它里面没有文件的时候被 git 删除），
3 - 在 package.json 的 "scripts: {}" 中添加这两个脚本
package.json:
json
{
"svgo": "svgo -f src/icons/filter --config=src/icons/svgo.js",
"svgo-color": "svgo -f src/icons/filter"
}svgo：用于纯色 svg，会去除 fill 和 fill-rule 色彩标签，保证程序中可以直接控制图标的颜色。
sego-color：用于彩色 svg，会保留 fill 和 full-rule 色彩标签。
配置 SVG 雪碧图
1. 在 vite.config.ts 中配置插件
找到 plugins 项，导入并添加 viteSvgIcons，具体代码如下
vite.config.ts:
typescript
import viteSvgIcons from 'vite-plugin-svg-icons';
import path from 'path';
export default () => {
return {
plugins: [
// SvgIcon 用于生成 svg 雪碧图
viteSvgIcons({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
}),
],
};
};2. 在 main.ts 中引入注册脚本
scr/main.ts:
typescript
import 'virtual:svg-icons-register';到这里 svg 雪碧图已经生成，可以在 src/icons/svg 目录下放置需要使用的 svg 文件
3. 创建一个组件来使用 SVG 雪碧图
/src/components/SvgIcon.vue:
vue
<template>
<svg aria-hidden="true">
<use :xlink:href="symbolId" :fill="color" />
</svg>
</template>
<script lang="ts">
// ===================================================
// === 使用方法请查阅: 'doc/如何使用 svg-icon 图标.md' ===
// ===================================================
import { defineComponent, computed } from 'vue'
export default defineComponent({
name: 'SvgIcon',
props: {
/** 前缀 */
prefix: {
type: String,
default: 'icon',
},
/** 图标名称 */
name: {
type: String,
required: true,
},
/** 图标颜色，也可也通过 css color 属性设置 */
color: {
type: String,
default: 'inherit',
},
},
setup(props) {
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
return { symbolId }
},
})
</script>
<style scoped>
svg {
width: 1.2em;
height: 1.2em;
fill: currentColor;
}
</style>完成后，通过导入 <svg-icon name="fileName" /> 组件就可以使用了，如果需要还可以设置全局导入。
我还在 doc 文件夹下面创建了使用文档：
doc/如何使用 svg-icon 图标组件.md:
markdown
# svg-icon - SVG 图标使用说明
1. 需要使用的 SVG ICON 放入 `src/icons/filter` 文件夹进行压缩
2. 执行压缩命令命令
```shell
# 适用于单色 svg：
pnpm run svgo
# 适用于彩色 svg：
pnpm run svgo-color
```
3. 复制压缩好的 ICON 到 `svg` 文件夹内使用
4. 使用 ⬇️⬇️⬇️⬇️ 方法
```html
<svg-icon name="fileName" />
```
5. 详细内容可查阅：https://github.com/anncwb/vite-plugin-svg-icons/blob/main/README.zh_CN.md
Nisekoi
絢香猫
絢香音