Home > Article > Web Front-end > How to use svg in vue3+vue-cli4
npm install svg-sprite-loader --save-dev
<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>
The imgs folder contains an svg folder, containing svg format files, and an index.js file. The content of the file is as follows
// 获取当前目录所有为.svg的文件 const req = require.context('./svg', false, /\.svg$/) // 解析获取的.svg文件的文件名称并返回 const requireAll = (requireContext) =>{ return requireContext.keys().map(requireContext) } requireAll(req)
As summarized in the comment area, if it is in a non-vue-cli4 project and an error is reported in config.module.rules.delete("svg");
, you can try to use config.module.rule("svg").exclude.add(resolve("src/assets/imgs")).end();
Replace this statement
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]' }) }, };
Note here that the component registration is placed in main.js. Otherwise, [Vue warn]: Failed to resolve component: svg-icon will be reported. It is predicted that the parent component has been created first but the child component has not been created yet, leading to the occurrence of this problem.
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>
The above is the detailed content of How to use svg in vue3+vue-cli4. For more information, please follow other related articles on the PHP Chinese website!