您现在的位置是：网站首页> 编程资料编程资料

CSS中引用svg图片支持动态切换颜色的实现代码基于Css Variable的主题切换完美解决方案(推荐)详解如何简单实现CSS主题的切换纯css实现选中切换效果的示例使用CSS实现黑暗模式和高亮模式的切换功能纯CSS免费让网站拥有暗黑模式切换功能的实现代码

2021-09-03 1003人已围观

简介这篇文章主要介绍了CSS中引用svg图片支持动态切换颜色的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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

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

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

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

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

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

react-inlinesvg

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

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

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

添加图片：

 import BackPng from '../../../../assets/images/back.svg';

设置动态样式：

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

到此这篇关于CSS中引用svg图片支持动态切换颜色的实现代码的文章就介绍到这了,更多相关css svg动态切换颜色内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！