一、安装 svg-sprite-loadernpm install svg-sprite-loader --save-dev
二、在src/components/svgicon下新建组件index.vue<template> <svg :class="svgclass" aria-hidden="true"> <use :xlink:href="iconname" rel="external nofollow" ></use> </svg></template><script>import { computed } from "@vue/reactivity";export default { name: "basesvgicon", props: { iconclass: { type: string }, classname: { type: string }, }, setup(props) { const iconname = computed(() => { return props.iconclass ? `#icon-${props.iconclass}` : "#icon"; }); const svgclass = computed(() => { return props.classname ? "svg-icon " + props.classname : "svg-icon"; }); return { iconname, svgclass }; },};</script><style scoped lang="scss">.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentcolor; overflow: hidden;}</style>
三、在assets在创建icons文件夹imgs文件夹里含一个svg文件夹，放svg格式文件，以及一个index.js文件，该文件内容如下
// 获取当前目录所有为.svg的文件const req = require.context('./svg', false, /\.svg$/)// 解析获取的.svg文件的文件名称并返回const requireall = (requirecontext) =>{ return requirecontext.keys().map(requirecontext)}requireall(req)
四、在src同级下创建vue.config.js进行配置经评论区总结，如果是在非vue-cli4的项目中，在config.module.rules.delete("svg");报错的话，可以尝试使用config.module.rule("svg").exclude.add(resolve("src/assets/imgs")).end();替换该语句
const path = require('path')function resolve(dir) { return path.join(__dirname, '.', dir)}module.exports = { chainwebpack: config => { config.module.rules.delete("svg"); // 重点：删除默认配置中处理svg, config.module .rule('svg-sprite-loader') .test(/\.svg$/) .include .add(resolve('src/assets/imgs')) // 处理svg目录 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolid: 'icon-[name]' }) },};
五、在main.js里引入，以及做一些小修改此处注意，将组件注册放到main.js里。不然会报[vue warn]: failed to resolve component: svg-icon的问题，预测为父组件先创建完了而子组件还没创建进去，导致该问题的出现
import { createapp } from 'vue'import app from './app.vue'import router from './router'import store from './store'import '@/assets/icons'const app = createapp(app)import svgicon from '@/components/svgicon' app.component('svg-icon', svgicon)app.use(store).use(router).mount('#app')
六、在页面中使用<div class="topleft"> <svg-icon icon-class="category"></svg-icon></div><div class="topcenter"></div><div class="topright"> <svg-icon icon-class="search"></svg-icon></div>
七、文件目录结构及其效果展示
以上就是vue3+vue-cli4中怎么使用svg的详细内容。