前端 引用svg图片,支持动态切换颜色 | 您所在的位置:网站首页 › 前端使用svg图标 › 前端 引用svg图片,支持动态切换颜色 |
当我们添加一张svg图片显示时,react提示找不到文件。 我们可以在全局文件global.d.ts内,添加图片类型的声明: 详见《TypeScript 引用资源文件后提示找不到的错误处理方案》 声明之后,引用不报错了。然后我们看看svg图片,里面有颜色及其它设置: 1 2 3 窗口_返回 4 5 6 7 8 9 10是否可以根据一张svg,显示不同的效果?比如hover后高亮 理论上添加xml代码解析,然后将svg以组件形式添加渲染,是可行的。 在网上逛了一圈,发现大多数都比较水,很多是通过加载全局的图片,作为单独组件或者缓存来使用,不适用 react-inlinesvg发现了一个比较不错的开源,超级不错,安利! https://github.com/gilbarbara/react-inlinesvg 安装:npm i react-inlinesvg 或者 yarn add react-inlinesvg 添加引用:import SVG from 'react-inlinesvg'; 添加图片: 1.import BackPng from '../../../../assets/images/back.svg';2.设置动态样式: 1 &:hover { 2 path { 3 fill: #4ecb78; 4 } 5 .backContent { 6 color: #4ecb78; 7 } 8 } 9 &:active { 10 path { 11 fill: #2baf57; 12 } 13 .backContent { 14 color: #2baf57; 15 } 16 }
|
CopyRight 2018-2019 实验室设备网 版权所有 |