CSS中如何引用svg图片支持动态切换颜色

这篇文章将为大家详细讲解有关CSS中如何引用svg图片支持动态切换颜色，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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

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

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

<?xmlversion="1.0"encoding="UTF-8"?>
<svgwidth="24px"height="24px"viewBox="002424"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">
<title>窗口_返回</title>
<gid="控件"stroke="none"stroke-width="1"fill="none"fill-rule="evenodd">
<gid="窗口_返回">
<rectid="Rectangle-6"fill="#D8D8D8"opacity="0"x="0"y="0"width="24"height="24"></rect>
<pathd="M8.35417135,12.9957726C8.13320936,12.73454588,12.39679678,12.0279541C8,11.65860588.13357489,11.32043638.3550807,11.0590615L8.3521103,11.0564202L14.356041,4.51971371L14.3599873,4.52318728C14.635253,4.2028852415.0434555,415.4990737,4C16.3280124,417,4.6715728817,5.5C17,5.887019916.8533375,6.2398060716.6125263,6.50587693L16.6210783,6.51340439L11.5390798,12.0228281L16.5124905,17.3935277C16.8121157,17.667765317,18.061954817,18.5C17,19.328427116.3280124,2015.4990737,20C15.0262153,2014.6044287,19.781470214.3293154,19.439953L8.35278214,12.9970098L8.35417135,12.9957726L8.35417135,12.9957726Z"id="Oval-43-Copy-3"fill="#808080"></path>
</g>
</g>
</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';

添加图片：

importBackPngfrom'../../../../assets/images/back.svg';
<SVGclassName="backIcon"src={BackPng}/>

设置动态样式：

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

关于“CSS中如何引用svg图片支持动态切换颜色”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。