作者:手机用户2502906225 | 来源:互联网 | 2023-05-19 04:21
这篇文章主要介绍了如何在 vue 中使用 svg symbols,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
目录
- 安装svg-sprite-loader插件
- 在vue.config.js中配置 svg-sprite-loader
- 封装IconSvg.vue通用组件
- 加载所有的svg静态资源,并且把IconSvg注册到全局组件当中
- 使用
安装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')
使用
使用的话有多种形式,我们一个一个来看。
1、使用自己编写的svg文件
在src/assets/icons文件夹下面创建circle.svg(一定是这个文件夹,因为这个文件夹下的svg文件会被你的svg插件解析)
经过svg-sprite-loader插件的解析,你在html里面可以看到有个id为circle(和svg名称一样)的一个symbol标签挂载在svg标签下面
这个时候直接使用就可以了
2、将svg标签封装到一个vue文件中
创建SvgList.vue组件
3、使用iconfont的svg代码
在src/assets/icons这个文件夹下面去创建heart.svg(一定是这个文件夹,因为这个文件夹下的svg文件会被你的svg插件解析)
使用
效果
在这里你会遇到一个问题,那就是给这个svg改颜色改不掉,你只要把svg标签里的fill属性去掉就可以了,或者把fill属性设置成none。还有一个stroke轮廓颜色也是可以设置的。
4、直接引入整个iconfont的svg图片
生成symbol代码
在index.html中引入上面的symbol代码
favicon.ico" rel="external nofollow" >
看控制台已经全部引入进来了
使用
效果
提示:当然你也可以上传svg图片到iconfont平台,然后再下载下来使用,但是在下载下来的时候一定要去去除颜色并提交,这样你的svg图片就可以随心所欲的改颜色了
到此这篇关于如何在vue中使用svgsymbols的文章就介绍到这了,更多相关vue使用svgsymbols内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!