本文摘自PHP中文网,作者不言,侵删。
这篇文章给大家介绍的内容是关于在react中使用svg的各种方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。优势
SVG可被非常多的工具读取和修改(比如vscode)
不失真, 放大缩小图像都很清晰
SVG文件是纯粹的XML, 也是一种DOM结构
使用方便, 设计软件可以直接导出
兼容性
上一张兼容性图表, 或到caniuse.com查看
兼容性也不是什么大问题. 当然, 如果你的网站还是需要兼容这些旧式的浏览器, 社区上也有对应的方案, 比如张鑫旭的一些SVG向下兼容优雅降级技术
使用方式
方案多种多样, 适合你的需求的才是最优的
直接在模板中使用
1 2 3 4 5 6 7 |
|
如果每个svg要前端画, 对前端要求较高.
如果每个图标从设计师给的svg代码里面拷, 要改各种标签不说, 改错了还报错
这样的方式并不友好
把svg转成字体
iconfont
直接把代码复制到项目css中, 定制你的标签样式, 参考阿里官方的文章, 使用起来简单粗暴, 而且浏览器兼容性高. 但是需要手动上传(有其他方案欢迎补充), 另外如果要部署到阿里的cdn以外的环境需要先下载下来, 再上传到目标环境. 略显麻烦.
此外还有icomoon等等都有提供类似的解决方案
把svg转成react component
请注意: 以下会包含typescript相关的配置
项目构建前转换
例:
typescript-react-svg-icon-generator, 需要我们有一条前置命令去把svg做转换.
1 2 3 4 5 6 7 8 9 |
|
1 |
|
使用:
1 2 3 4 5 6 |
|
此外, svgr(下面提到的)同样提供这种方案, 请自行查阅
相关阅读 >>
export和export default中的知识点介绍(附示例)
html5中的canvas 和 svg分别是什么?它们的区别在何处?(实例)
svg标签:<text >标签和<tspan>标签的应用(代码)
更多相关阅读请进入《react.js》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者