在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


  • 2019-12-20 13:24:58

    瓦片地图生成使用以及原理

    我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需要一个转换过程,这个过程就叫做投影(Projection)。在地球上我们通过经纬度来描述某个位置,而经过投影之后的地图也有自己的坐标系统,本篇文章就来详细介绍在百度地图API中涉及的各种坐标体系。

  • 2019-12-20 13:27:16

    腾讯地图谷歌和高德地图等自定义地图区别

    腾讯、百度、Google的地图投影均采用Web Mercator 投影坐标系;腾讯与Google的地图瓦片分辨率及切片范围是完全相同的,仅仅是命名规则稍有不同,这就使得同一位置和缩放级别的地图瓦片是完全可以重叠的;而百度地图每个缩放级别分辨率与前两者均不相同,而且地图瓦片的坐标原点做了一定的偏移,导致百度地图与前两者的瓦片是无法重叠的,这是因为百度在GCJ-02的基础上又进行了加密处理,形成了百度独有的BD-09坐标系。

  • 2019-12-22 08:06:48

    如何快速撤销上一次的commit

    在平时工作中使用git难免会提交一些错误的文件到git库里,这时候,撤销吧,怕把正确的文件删除了,不撤销重新改又很麻烦,下面,我就从提交的三个阶段,来讲解如何撤销错误的操作。

  • 2019-12-23 14:54:03

    RPC, REST ,GraphQL区别比较优劣

    其实在使用和学习的过程中,有很多文章都对比过它们的异同,但是大部分文章并没有从一个相对客观的角度来对比,更多是为了突显一个的优点而刻意指出另外一个的缺点。这让我想到一句话,脱离业务情景谈技术就是耍流氓。