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>
// 获取当前目录所有为.svg的文件 const req = require.context('./svg', false, /\.svg$/) // 解析获取的.svg文件的文件名称并返回 const requireAll = (requireContext) =>{ return requireContext.keys().map(requireContext) } requireAll(req)
4. 구성을 위해 동일한 src 수준에 vue.config.js를 생성합니다
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]' }) }, };
config.module.rules.delete("svg");
报错的话,可以尝试使用config.module.rule("svg").exclude.add(resolve("src/assets/imgs")).end();
의 문을 교체합니다. 5. main.js에 도입하고 약간 수정합니다.
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')
6.
<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를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!