vue项目中使用svgIcon(svg |
您所在的位置:网站首页 › svglcon组件 › vue项目中使用svgIcon(svg |
目录 前言 一、安装svg-sprite-loader 二、封装组件 1.在components路径下新建svg/svgIcon.vue 2.在src目录下新建icons文件夹,包括一下文件 三、配置svg-sprite-loader 四、使用svg-icon组件 五、配置被选中时的颜色 1.检查svg源文件 2.配置选中后得颜色 总结 前言网页中经常会遇到一些自定义得小图标,为了保证图标不失真,我们经常使用svgIcon实现。接下来一起看看如何安装和配置把~ 一、安装svg-sprite-loader安装命令:npm install svg-sprite-loader -D 二、封装组件 1.在components路径下新建svg/svgIcon.vue代码如下: import { isExternal } from '@/utils/validate' export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true, }, className: { type: String, default: '', }, }, computed: { isExternal() { return isExternal(this.iconClass) }, iconName() { return `#icon-${this.iconClass}` }, svgClass() { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } }, styleExternalIcon() { return { mask: `url(${this.iconClass}) no-repeat 50% 50%`, '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`, } }, }, } .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; /* currentColor 表示一个变量,若未赋值color,则继承父级color */ overflow: hidden; } .svg-external-icon { background-color: currentColor; mask-size: cover !important; display: inline-block; } 2.在src目录下新建icons文件夹,包括一下文件index.js 代码如下: import Vue from 'vue' import SvgIcon from '@/components/svg/svgIcon' // svg组件 // 注册到全局 Vue.component('svg-icon', SvgIcon) const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /\.svg$/) requireAll(req)svgo.yml代码如下: # replace default config # multipass: true # full: true plugins: # - name # # or: # - name: false # - name: true # # or: # - name: # param1: 1 # param2: 2 - removeAttrs: attrs: - 'fill' - 'fill-rule'三、配置svg-sprite-loader 找到vue.config.js ,添加以下配置: chainWebpack: (config) => { config.module.rules.delete('svg') config.resolve.symlinks(true) config.resolve.alias .set('@', resolve('src')) .set('~@', resolve('src/assets')) .set('@c', resolve('src/components')) .set('static', resolve('src/static')) config.module .rule('svg-sprite-loader') .test(/\.svg$/) .include.add(resolve('src/icons')) // 处理svg目录 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]', }) }, 四、使用svg-icon组件 五、配置被选中时的颜色 1.检查svg源文件这里注意查看 icons/svg 下面得文件,fill属性需要改成currentColor(当前颜色,如果没有则继承父节点颜色) 如下: 注意: a不需要改变,默认是svg背景色,只需要改变.b就可以如果是行内元素则直接写: fill="currentColor" 2.配置选中后得颜色这里我得使用场景是侧边栏,所以我会直接改变填充颜色: .el-menu-item.is-active.icon_padding{ fill:#2F51FF !important }就这样就可以啦,是不是非常简单鸭~ 对了,如果你要改变svg大小,推荐你使用上述方式,而不要直接改变组件里面得大小~ 如下: .icon_padding{ width: 16PX !important; height: 16PX !important; margin-right: 8PX } 总结以上就是今天要讲的内容,本文仅仅简单介绍了安装、封装svg图标、使用及配置,很简单啦,试起来吧,宝子们~ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |