您现在的位置是：网站首页> 编程资料编程资料

教你在vue 中使用 svg symbols_vue.js_

2023-05-24 510人已围观

简介教你在vue 中使用 svg symbols_vue.js_

安装svg-sprite-loader插件

npm install svg-sprite-loader -D
或者
yarn add svg-sprite-loader -D

在vue.config.js中配置 svg-sprite-loader

const path = require('path'); module.exports = { chainWebpack:config =>{ const dir = path.resolve(__dirname,'src/assets/icons') config.module .rule('svg-sprite') .test(/\.svg$/) .include.add(dir).end() //设置 icons 目录走 svg-sprite 规则 .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract : false}).end() .use('svgo-loader').loader('svgo-loader') .tap(options => ({...options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end()//安装插件去除svg中的fill属性 config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite: true}]) config.module.rule('svg').exclude.add(dir)//其他svg loader 排除 icons 目录 } }

也可以这么配置

const { defineConfig } = require('@vue/cli-service') // 加在头部 const path = require('path') function resolve (dir) { return path.join(__dirname, dir) } module.exports = defineConfig({ transpileDependencies: true, chainWebpack (config) { config.plugins.delete('prefetch') // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ // symbolId: 'icon-[name]' symbolId: '[name]' }) .end() } })

注意：src/assets/icons这个文件夹放着你的svg文件

封装IconSvg.vue通用组件

加载所有的svg静态资源，并且把IconSvg注册到全局组件当中

import Vue from 'vue' import App from './App.vue' import router from './router' // 引入本地的svg文件 // 定义一个加载目录的函数 const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./assets/icons', false, /\.svg$/) // 加载目录下的所有的 svg 文件 requireAll(req) // 全局注册IconSvg组件 const IconSvg = () => import('./components/svg/IconSvg'); const components = { IconSvg } Object.keys(components).forEach(item => { Vue.component(item, components[item]) }) Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')