安裝依賴

npm i svg-sprite-loader --save

目錄結構

創建 svg-icon 組件

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName"/></svg> </template><script> export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}}} } </script><style scoped> .svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden; } </style>

在該組件的同級目錄創建 index.js 和 svg文件夾，該文件夾下存放著svg文件

const requireAll = requireContext =>requireContext.keys().map(requireContext) const req = require.context('./svg', false, /\.svg$/) requireAll(req)

修改 Vue cli3 配置

在vue.config.js 中

module.exports = {// svg 配置chainWebpack: config => {const svgRule = config.module.rule('svg')// 清除已有的所有 loader,如果你不這樣做，接下來的 loader 會附加在該規則現有的 loader 之后。svgRule.uses.clear()// 添加要替換的 loadersvgRule.use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'})},devServer: {proxy: {'/api': {target: 'http://localhost:8002', //對應自己的接口changeOrigin: true,ws: true,pathRewrite: {'^/api': ''}}}},publicPath: process.env.NODE_ENV === 'production' ? './' : './',outputDir: "dist", // 輸出文件目錄lintOnSave: false, // eslint 是否在保存時檢查assetsDir: 'static', // 配置js、css靜態資源二級目錄的位置 }

使用

在main.js 入口文件中引入使用

import Vue from 'vue' import SvgIcon from '@/components/SvgIcon/index.vue'// svg組件 import '@/components/SvgIcon/index.js' Vue.component('svg-icon', SvgIcon)

在組件中使用

// icon-class 就是svg文件的名稱 <svg-icon :icon-class="value.icon" />

例子

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Vue.js使用矢量图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。