目录
前言
定制软件网页中经常会遇到一些定制软件自定义得小图标,定制软件为了保证图标不失真,定制软件我们经常使用svgIcon实现。定制软件接下来一起看看如何安装和配置把~
一、安装svg-sprite-loader
安装命令:npm install svg-sprite-loader -D
二、
1.在components路径下新建svg/svgIcon.vue
代码如下:
- <template>
- <div
- v-if="isExternal"
- :style="styleExternalIcon"
- class="svg-external-icon svg-icon"
- v-on="$listeners"
- />
- <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
- <use :xlink:href="iconName" />
- </svg>
- </template>
-
- <script>
- 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%`,
- }
- },
- },
- }
- </script>
-
- <style lang="stylus" scoped>
- .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;
- }
- </style>
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--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 :icon-class="item.icon" class="icon_padding" />
五、配置被选中时的颜色
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图标、使用及配置,很简单啦,试起来吧,宝子们~