读过一本好书,像交了一个益友。——臧克家
svgicon 组件搭建
提供两种写法,vue2 和vue3
vue2 写法
- 编写SvgIcon组件
// src/components/SvgIcon/index.vue
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners"></div>
<svg v-else :fill="iconColor" :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,
default: ''
},
className: {
type: String,
default: ''
},
iconColor: {
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>
- 注册组件,指定目录引入svg图片
// src/icons/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
- 在main.js文件中引入index.js
import '@/icons' // icon
- vue页面使用
<SvgIcon icon-class="XXX" />
vue3+vite项目中使用svg
- 安装 svg-sprite-loader
npm install svg-sprite-loader -D
# via yarn
yarn add svg-sprite-loader -D
- 创建svgIcon.vue文件
<template>
<svg
:class="['svg-icon', $attrs.class]"
:style="{
width: iconSize + 'px',
height: iconSize + 'px',
}"
aria-hidden="true"
>
<use :xlink:href="'#icon-' + iconName" :fill="color" />
</svg>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'SvgIcon',
props: {
iconName: {
type: String,
required: true,
},
color: {
type: String,
default: '',
},
iconSize: {
type: [Number, String],
default: 14,
},
},
setup() {
return {};
},
});
</script>
<style scope>
.svg-icon {
vertical-align: middle;
fill: currentColor;
}
</style>
- 创建 icons 文件夹,存放 svg 文件
- 在 main.ts 里面全局注入 svg-icon 组件
import { createApp } from 'vue'
import App from './App.vue'
import svgIcon from './components/svgIcon.vue'
createApp(App).component('svg-icon', svgIcon).mount('#app');
- 创建svgBuilder.ts
import { readFileSync, readdirSync } from 'fs';
let idPerfix = '';
const svgTitle = /<svg([^>+].*?)>/;
const clearHeightWidth = /(width|height)="([^>+].*?)"/g;
const hasViewBox = /(viewBox="[^>+].*?")/g;
const clearReturn = /(\r)|(\n)/g;
function findSvgFile(dir) {
const svgRes = [];
const dirents = readdirSync(dir, {
withFileTypes: true,
});
for (const dirent of dirents) {
if (dirent.isDirectory()) {
svgRes.push(...findSvgFile(dir + dirent.name + '/'));
} else {
const svg = readFileSync(dir + dirent.name)
.toString()
.replace(clearReturn, '')
.replace(svgTitle, (_, $2) => {
// console.log(++i)
// console.log(dirent.name)
let width = 0;
let height = 0;
let content = $2.replace(clearHeightWidth, (_, s2, s3) => {
if (s2 === 'width') {
width = s3;
} else if (s2 === 'height') {
height = s3;
}
return '';
});
if (!hasViewBox.test($2)) {
content += `viewBox="0 0 ${width} ${height}"`;
}
return `<symbol id="${idPerfix}-${dirent.name.replace('.svg', '')}" ${content}>`;
})
.replace('</svg>', '</symbol>');
svgRes.push(svg);
}
}
return svgRes;
}
export const svgBuilder = (path, perfix = 'icon') => {
if (path === '') return;
idPerfix = perfix;
const res = findSvgFile(path);
// console.log(res.length)
// const res = []
return {
name: 'svg-transform',
transformIndexHtml(html) {
return html.replace(
'<body>',
`
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
${res.join('')}
</svg>
`,
);
},
};
};
- 最后在vite.config.js修改配置
import { svgBuilder } from './src/plugins/svgBuilder';
export default defineConfig({
plugins: [svgBuilder('./src/assets/svg/')] // 这里已经将src/icons/svg/下的svg全部导入,无需再单独导入
})