Vite + Vue2使用svg图标
文章目录
前言
vite-plugin-svg-icons
用于生成 svg 雪碧图.
提示:以下是本篇文章正文内容,下面案例可供参考
一、特征?
预加载 在项目运行时就生成所有图标,只需操作一次 dom
高性能 内置缓存,仅当文件被修改时才会重新生成
二、使用步骤
1.安装(yarn or npm)
node version: >=12.0.0
vite version: >=2.0.0
yarn add vite-plugin-svg-icons -D
or
npm i vite-plugin-svg-icons -D
2.使用
2.1 vite.config.ts 中的配置插件:
// vite.config.js
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path'
export default {
plugins: [
createSvgIconsPlugin({
// 指定要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
// 执行icon name的格式
symbolId: 'icon-[dir]-[name]',
}),
],
}
2.2 在 src/main.ts 内引入注册脚本:
import 'virtual:svg-icons-register';
3.如何在组件使用
3.1 /src/components/SvgIcon.vue
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate';
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true,
},
className: {
type: String,
default: '',
},
},
computed: {
isExternal() {
return isExternal(this.iconClass);
},
iconName() {
return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className;
} else {
return 'svg-icon';
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
};
},
},
};
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover !important;
display: inline-block;
}
</style>
3.2 icons 目录结构
# src/icons/svg
- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg
3.2 /src/App.vue
<template>
<div>
<SvgIcon name="user"></SvgIcon>
<SvgIcon name="tree"></SvgIcon>
<SvgIcon name="tree-table"></SvgIcon>
</div>
</template>
<script>
import SvgIcon from './components/SvgIcon.vue';
export default{
name: 'App',
components: { SvgIcon },
};
</script>