一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

CSS中引用svg图片支持动态切换颜色代码实例

时间:2020-07-18 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下CSS中引用svg图片支持动态切换颜色代码实例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

当我们添加一张svg图片显示时,react提示找不到文件。

我们可以在全局文件global.d.ts内,添加图片类型的声明:

声明之后,引用不报错了。然后我们看看svg图片,里面有颜色及其它设置:



    窗口_返回
    
        
            
            
        
    

是否可以根据一张svg,显示不同的效果?比如hover后高亮

理论上添加xml代码解析,然后将svg以组件形式添加渲染,是可行的。

在网上逛了一圈,发现大多数都比较水,很多是通过加载全局的图片,作为单独组件或者缓存来使用,不适用

react-inlinesvg

发现了一个比较不错的开源,超级不错,安利!

https://github.com/gilbarbara/react-inlinesvg

安装:npm i react-inlinesvg或者yarn addreact-inlinesvg

添加引用:import SVG from 'react-inlinesvg';

添加图片:

css;">import BackPng from '../../../../assets/images/back.svg';

设置动态样式:

&:hover {
    path {
      fill: #4ecb78;
    }
    .backContent {
      color: #4ecb78;
    }
  }
  &:active {
    path {
      fill: #2baf57;
    }
    .backContent {
      color: #2baf57;
    }
  }

热门栏目