在react中使用svg的各种骚姿势 1
开头先抛个可供参考的项目ts-react-webpack4, 或脚手架steamer-react-ts
优势
- SVG可被非常多的工具读取和修改(比如vscode)
- 不失真, 放大缩小图像都很清晰
- SVG文件是纯粹的XML, 也是一种DOM结构
- 使用方便, 设计软件可以直接导出
兼容性
上一张兼容性图表, 或到caniuse.com查看
兼容性也不是什么大问题. 当然, 如果你的网站还是需要兼容这些旧式的浏览器, 社区上也有对应的方案, 比如张鑫旭的一些SVG向下兼容优雅降级技术
使用方式
方案多种多样, 适合你的需求的才是最优的
直接在模板中使用
const Home = () => (<div><svg width={300} height={300}><rect width="100%" height="100%" style={{ fill: 'purple', strokeWidth: 1, stroke: 'rgb(0,0,0)' }} /></svg></div>
)
- 如果每个svg要前端画, 对前端要求较高.
- 如果每个图标从设计师给的svg代码里面拷, 要改各种标签不说, 改错了还报错
这样的方式并不友好
把svg转成字体
iconfont
直接把代码复制到项目css中, 定制你的标签样式, 参考阿里官方的文章, 使用起来简单粗暴, 而且浏览器兼容性高. 但是需要手动上传(有其他方案欢迎补充), 另外如果要部署到阿里的cdn以外的环境需要先下载下来, 再上传到目标环境. 略显麻烦.
此外还有icomoon等等都有提供类似的解决方案
把svg转成react component
请注意: 以下会包含typescript相关的配置
项目构建前转换
例:
typescript-react-svg-icon-generator, 需要我们有一条前置命令去把svg做转换.
// svg-generator.jsconst generator = require('typescript-react-svg-icon-generator')const config = {svgDir: './svg/',destination: './Icon/index.tsx'
}
generator(config)
$ node ./svg-generator.js
使用:
import Icon from './Icon'
export default class App extends Component {render() {return <Icon kind='close' color='#748' width={500} height={100} />}
}
此外, svgr(下面提到的)同样提供这种方案, 请自行查阅
项目构建时转换
例:
@svgr/webpack
嗯. 没错, 这是一个webpack loader.
// webpack rules config
{test: /\.svg$/,loader: '@svgr/webpack'
}
// 全局声明svg component定义
declare interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}declare module '*.svg' {const content: SvgrComponentexport default content
}
import IconReact from '@assets/svg/react.svg'const Home = () => (<div><IconReact width={180} height={180} color="purple" /></div>
)
这个方案好处不仅体现在构建时转换, 更重要的是它完全继承了SVGAttributes, 不需要额外的学习成本! 可参考项目ts-react-webpack4, 或脚手架steamer-react-ts
此外, 还有react-svg, svg-react-loader等同样是以类似的方式实现的.
有什么意见或建议也欢迎在下方评论!
在react中使用svg的各种骚姿势 1相关推荐
- 在react中使用svg的各种骚姿势
开头先抛个可供参考的项目ts-react-webpack4, 或脚手架steamer-react-ts 优势 SVG可被非常多的工具读取和修改(比如vscode) 不失真, 放大缩小图像都很清晰 SV ...
- php arcode svg,在react中使用svg的各种方法总结(附代码)
这篇文章给大家介绍的内容是关于在react中使用svg的各种方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 优势 SVG可被非常多的工具读取和修改(比如vscode ...
- React中的SVG陷阱
react svg When we want to use SVG image in React, we may import it like this: 当我们想在React中使用SVG图像时,我们 ...
- react前端显示图片_在 React 中使用 SVG 图标组件
SVG 很酷,它们能放大放小. 那么 SVG 的优点是什么? SVG 或可缩放矢量图形是基于 XML 的格式图像格式,可以在保持图像质量的同时缩放到任何大小.因此,当你需要根据需要调整大小的图像时,S ...
- React中使用SVG文件显示成图片
SVG 没法直接渲染都img.一般引用插件 方案一:使用 create-react-app脚手架 创建react项目 方案二:file-loader 插件 SVG文件优缺点 优点: 不失真, 放大缩小 ...
- react使用引入svg的icon;svg图形制作
由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...
- svg react_React中的SVG陷阱
svg react When we want to use SVG image in React, we may import it like this: 当我们想在React中使用SVG图像时,我们 ...
- [译] How to NOT React:React 中常见的反模式与陷阱
原文地址:How to NOT React: Common Anti-Patterns and Gotchas in React 原文作者:NeONBRAND 译文出自:掘金翻译计划 本文永久链接:g ...
- react中创建一个组件_如何使用React和MomentJS创建一个Countdown组件
react中创建一个组件 Recently I had to create a Countdown for one of my other projects, and I thought that i ...
最新文章
- Mac OS X如何进行字体管理
- mysql客户端hang_MySQL所有操作hang住了,怎么破?
- 解决在 IntelliJ IDEA 中,输入代码时突然不会自动显示下拉框提示
- 通过改进视频质量评估提升编码效率
- 新数据革命:开源图形化数据引擎Hawk5发布
- sql语句按月份统计查询
- 掘金 Markdown 语法手册
- VS2008 安装失败(“Web 创作组件”无法)
- Java中继承方法的使用,以及使用方法的注意事项,继承方法重写的理解,白话文详解,简单易理解
- 如何在电脑上将PDF文件转换成word?
- 接近开关编码器脉冲信号计数器NPN/PNP转485信号采集Modbus模块
- global全局对象
- unity_插屏广告
- Ceph的进阶使用(一)
- CentOS 6.8 数据库安装5.5.32
- Linux常用命令有哪些
- 智慧家庭信息安全白皮书发布,推动智慧家庭叫好又叫座
- iReport制作报表
- 死亡之雨新的僵尸病毒中文破解版 v1.0绿色免安装版
- python bs4 find_all_网络爬虫(三)BS4提取之find_all
热门文章
- 收缩sqlserver事务日志
- UPPERERR.txt
- 改变WCF service location的 hostName
- [翻译]下拉列表多选控件MultiDropDown
- windows API 菜鸟学习之路(三)
- Element-UI-的布局和容器---Element-UI工作笔记003
- Spring Security OAuth2.0_实现分布式认证授权_网关资源服务配置_Spring Security OAuth2.0认证授权---springcloud工作笔记152
- VC++多线程工作笔记0001---认识与创建线程
- jsp加载常量的探讨
- delphi 调用Msftedit.dll,重写Richedit,支持RTF画表格