CSS中引入svg照片适用动态性转换色调编码案例

当我们们加上一张svg照片显示信息时,react提醒找不着文档。 大家能够在全局性文档global.d.ts内,加上照片种类的申明: 申明以后,引入没报不对。随后大家看一下svg照片,里边有色调以及它设定:
 对话框_回到

在网络上逛了一圈,发觉大多数数都较为水,许多是根据载入全局性的照片,做为独立部件或是缓存文件来应用,不适感用 react-inlinesvg 发觉了一个较为非常好的开源系统,非常非常好,分享! gilbarbara/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图片支持动态切换颜色代码实例

相关阅读