当我们添加一张svg图片显示时,react提示找不到文件。
我们可以在全局文件global.d.ts内,添加图片类型的声明:
详见《TypeScript 引用资源文件后提示找不到的错误处理方案》
声明之后,引用不报错了。然后我们看看svg图片,里面有颜色及其它设置:
是否可以根据一张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.<SVG className="backIcon" src={BackPng} />
设置动态样式:
作者:唐宋元明清2188
本文版权归作者所有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。