在vue3+vite项目中使用svg
2022-05-25 本文已影响0人
MT659
安装 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 文件
image.png
在 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全部导入，无需再单独导入
})
