在vue项目中使用svg,并能根据需要修改svg大小颜色等样式

2019-12-10 11:23:50

参考地址   在vue项目中使用svg,并能根据需要修改svg大小颜色等样式

重点是最后一句话,去掉fill这个属性,我们再设置fill才有效果。

1、介绍


考虑到一部分人还在用vue-cli 2.x,故本教程既包含2.x版本,也包含3.x版本


2、安装依赖


npm install --save-dev svg-sprite-loader

1

3、把svg文件放入项目中


如图所示:


我把svg文件放入到了assets目录下的icons目录里面了


4.1、vue-cli 2.x 配置


在webpack.base.conf.js中配置允许svg依赖


 module: {

    rules: [

      {

        test: /\.svg$/,

        loader: 'svg-sprite-loader',

        include: [resolve('src/assets/icons')],

        options: {

          symbolId: 'icon-[name]'

        }

      },

      {

        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

        loader: 'url-loader',

        exclude: [resolve('src/assets/icons')],

        options: {

          limit: 10000,

          name: utils.assetsPath('img/[name].[hash:7].[ext]')

        }

      }

    ]

  },

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

4.2、vue-cli 3.x 配置


在根目录新建vue.config.js文件中配置loader


module.exports = {

  chainWebpack: config => {

    // svg rule loader

    const svgRule = config.module.rule('svg') // 找到svg-loader

    svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后

    svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录

    svgRule // 添加svg新的loader处理

      .test(/\.svg$/)

      .use('svg-sprite-loader')

      .loader('svg-sprite-loader')

      .options({

        symbolId: 'icon-[name]',

      })

    // 修改images loader 添加svg处理

    const imagesRule = config.module.rule('images')

    imagesRule.exclude.add(resolve('src/assets/icons'))

    config.module

      .rule('images')

      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)

  }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

5、在src/compoments/下创建SvgIcon.vue


<template>

  <svg :class="svgClass" aria-hidden="true">

    <use :xlink:href="iconName"></use>

  </svg>

</template>


<script>

export default {

  name: 'svg-icon',

  props: {

    iconClass: {

      type: String,

      required: true

    },

    className: {

      type: String

    }

  },

  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;//此属性为更改svg颜色属性设置

  overflow: hidden;

}

</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

6、在assets/icons/下创建index.js


相信大家也看到上面传svg文件到项目那张图的时候,看到了里面有个index.js,这个文件就是包含将组件注册到全局的逻辑


下面的@即为src,是事先在配置中配置过的


import Vue from 'vue'

import SvgIcon from '@/components/SvgIcon'

// 全局注册组件

Vue.component('svg-icon', SvgIcon)

// 定义一个加载目录的函数

const requireAll = requireContext => requireContext.keys().map(requireContext)

const req = require.context('@/assets/icons', false, /\.svg$/)

// 加载目录下的所有 svg 文件

requireAll(req)

1

2

3

4

5

6

7

8

9

7、在main.js中引入执行


import './assets/icons'

1

8、使用svg组件

在需要的组件中直接可以使用,iconClass的值就是svg文件的文件名,className的值就是对于svg图标的样式类名


<template>

  <svg-icon iconClass='qyf_sy_tx' className='icon'></svg-icon>

</template>

...

<style scoped>

.icon {

  width: 100px;

  height: 100px;

  color: red;

}

</style>

1

2

3

4

5

6

7

8

9

10

11

在类名icon中设置需要的样式,包括颜色,svg的样式就会随之改变


注意:有时会出现改变颜色图标颜色不会发生改变的情况,这时打开svg文件,看下图:


删除style标签里的每一项fill样式设置,这样就可以实现颜色自由切换了

————————————————

版权声明:本文为CSDN博主「dearqz」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/weixin_42204698/article/details/93751906


  • 2018-08-28 14:19:58

    php如何配置上传较大文件

     在php中判断上传文件的大小,但是文件一但过大,print_r($_FILES);的值就变为null了,有时候大家会遇到这么一个问题,上传小文件 时,PHP能正常获取到,但是文件一超过8M就变为空了,我在做项目的时候,就遇到这样的问题,我刚开始把最大上传文件值改为20M,在PHP.INI里 面。

  • 2018-08-28 15:09:50

    JAVA中MAP值保持顺序不变

    今天在进行JAVA开发过程中,因需要使用MAP来存放数据,同时希望MAP中KEY的顺序与放入顺序保持一致。 在使用HashMap之后,发现KEY的顺序是乱序的,每次打印还不太一样。上网查询资料之后发现:

  • 2018-09-03 13:57:27

    load average 的含义

    一般的进程需要消耗CPU、内存、磁盘I/O、网络I/O等资源,在这种情况下,平均负载就不是单独指的CPU使用情况。即内存、磁盘、网络等因素也可以影响系统的平均负载值。 在单核处理器中,平均负载值为1或者小于1的时候,系统处理进程会非常轻松,即负载很低。当达到3的时候,就会显得很忙,达到5或者8的时候就不能很好的处理进程了(其中5和8目前还是个争议的阈值,为了保守起见,建议选择低的)。

  • 2018-09-05 01:42:03

    git reset 回退以前某个版本及常用命令

    第一个命令只删除所有untracked的文件,如果文件已经被tracked, 修改过的文件不会被回退。而第二个命令把tracked的文件revert到前一个版本,对于untracked的文件(比如编译的临时文件)都不会被删除。

  • 2018-09-08 16:04:25

    Android SQLiteDatabase使用详细教程

    Android提供了创建和是用SQLite数据库的API。SQLiteDatabase代表一个数据库对象,提供了操作数据库的一些方法。在Android的SDK目录下有sqlite3工具,我们可以利用它创建数据库、创建表和执行一些SQL语句。下面是SQLiteDatabase的常用方法。SQLiteDatabase的常用方法方法名称方法表示含义openOrCreateDatabase(Stringpath,SQLiteDatabase.CursorFactoryfactory)