将所有svg图标存放在
src/assets/svg-icons
目录中
pnpm install vite-plugin-svg-icons -D
import 'virtual:svg-icons-register'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 插件中加入这个代码
[
// ...
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/svg-icons')],
symbolId: '[name]',
}),
// ...
]
<script>
import { computed, defineComponent } from 'vue'
function compatibleName(inputString) {
// 使用正则表达式替换所有的冒号
const resultString = inputString.replace(/:/g, '-')
return resultString
}
export default defineComponent({
name: 'SvgIcon',
props: {
icon: {
type: String,
required: true,
},
className: {
type: String,
default: '',
},
},
setup(props) {
const symbolId = computed(() => `#${compatibleName(props.icon)}`)
const svgClass = computed(() => {
if (props.className)
return `svg-icon ${props.className}`
return 'svg-icon'
})
return { symbolId, svgClass }
},
})
</script>
<template>
<svg :class="svgClass" aria-hidden="true">
<use class="svg-use" :href="symbolId" />
</svg>
</template>
<style scope>
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
overflow: hidden;
}
</style>
import { SvgIcon } from '@/components/common'
template
<div>
<SvgIcon icon="mingcute-more-1-fill" style="color: pink;height: 50px;width: 50px;" />
</div>
参考:https://blog.csdn.net/weixin_53731501/article/details/125478380
正在学习Go语言的PHP程序员。