在react中使用svg的各种骚姿势

开头先抛个可供参考的项目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>
)
  1. 如果每个svg要前端画, 对前端要求较高.
  2. 如果每个图标从设计师给的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等同样是以类似的方式实现的.

有什么意见或建议也欢迎在下方评论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366778.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

chrome 浏览器的插件权限有多大?

转自&#xff1a;https://segmentfault.com/q/1010000003777353 1&#xff09;Chrome插件本身有机制控制&#xff0c;不会无限制的开放很多权限给你2&#xff09;页面的DOM元素时可以操作的&#xff0c;Chrome插件是和宿主页面之间是共享DOM对象&#xff0c;但是不共享Javascri…

3.2自定义方法

方法是类的一种行为&#xff0c;方会使我们的代码容易修改&#xff0c;方便阅读&#xff0c;实现封装和重用。比如前面使用的很多.net定义好的类的方法&#xff0c;当然我们也可以自定义方法。 3.2.1定义方法 语法&#xff1a; 访问修饰符 返回类型 方法名(参数列表) &#xff…

linux live cd ubuntu,在Windows 7上体验Ubuntu Live CD

http://download.gna.org/grub4dos/grub4dos-0.4.4.zip把grldr.mbr,grldr放到C盘根目录.注意:以管理员身份运行cmd,进行以下操作.备份/Boot/BCD:bcdedit /export "D:\BCD.backup"用bcdedit编辑启动文件/Boot/BCD添加GRUB引导项:bcdedit /create /d "GRUB" …

[Electron]仿写一个课堂随机点名小项目

自从前几个月下了抖音&#xff0c;无聊闲暇时就打会打开抖音&#xff0c;因为打开它有种莫名其妙打开了全世界的感觉... 无意中看到这个小视频&#xff1a;随机点名 于是仿写了一个课堂点名小项目&#xff0c;算是对Electron的一个简单的认识&#xff0c;有时间再深入。 项目…

何时以及如何使用ThreadLocal

正如我们的读者可能已经猜到的那样&#xff0c;我每天都在处理内存泄漏。 最近&#xff0c;一种特殊类型的OutOfMemoryError消息开始引起我的注意-滥用ThreadLocals触发的问题变得越来越频繁。 在查看此类泄漏的原因时&#xff0c;我开始相信其中一半以上是由于开发人员导致的&…

linux redis安装使用,linux安装redis

Linux(CentOS)中Redis介绍、安装、使用【一篇就够】2018-05-13 13:36:16 sjmz30071360 阅读数 1590更多分类专栏&#xff1a; redis版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循CC 4.0 BY-SA版权协议&#xff0c;转载请附上原文出处链接和本声明。一、介绍Redis is…

用three.js写一个简单的3D射门游戏

这个小游戏很简单&#xff0c;一共由3个部分构成。1个平面&#xff08;球场&#xff09;&#xff0c;1个球体&#xff08;足球&#xff09;还有一个立方体&#xff08;球门&#xff09;。 上个图给你们感受一下简陋的画风&#xff08;掘金最高上传5M图片&#xff0c;原来图片都…

100份Spring面试问答-最终名单(PDF下载)

上次更新时间&#xff1a;2019年2月11日 这是有关Spring框架的一些最重要问题的摘要&#xff0c;在面试或面试测试过程中可能会要求您回答这些问题&#xff01; 您无需担心下一次面试的机会&#xff0c;因为Java Code Geeks在这里为您服务&#xff01; 您可能会被问到的大多数…

3.1 unittest简介

3.1 unittest简介 前言 熟悉java的应该都清楚常见的单元测试框架Junit和TestNG。python里面也有单元测试框架-unittest,相当于是一个python版的junit。python里面的单元测试框架除了unittest&#xff0c;还有一个pytest框架&#xff0c;这个用的比较少&#xff0c;后面有空再继…

织梦其他模型使用联动类型地区联动

官方模型的联动类型只能模型是在【独立模型】或者官方默认的【分类信息】模型下使用&#xff0c;其他模型下使用无效&#xff0c;我们来让联动类型支持所有模型。 添加联动地区类型字段 内容模型管理 - 文章模型(或者其他模型) - 添加新字段 字段名称 和 数据类型 千万别搞错了…

linux修改组的选项名字为,Linux用户、组及权限管理浅析

一、用户和组1.用户系统用来认证(Authentication)&#xff0c;授权(Authorization)&#xff0c;审计(Autition)的帐号。通过登录用户来登录系统。操作系统通过登录不同的用户来调用相对应权限的进程或程序&#xff0c;也可以说&#xff0c;用户是能获取系统资源的权限集合。2.用…

如何在 vue-cli v3.0 中使用 SCSS/SASS

在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间。关于如何在 vue-cli v3.0 中使用 SCSS/SASS&#xff0c;这里提供三种方案。前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器)&#xff0c;否则无法在项目中直接使用。 方案一&…

使用IntelliJ IDEA进行热部署

最近&#xff0c;在PrimeFaces论坛PrimeFaces IDE Poll中进行了投票&#xff0c;以投票赞成用于开发PrimeFaces应用程序的最佳IDE。 最多人投票支持NetBeans。 NetBeans和Eclipse是免费的IDE。 我最喜欢的IDE IntelliJ IDEA Ultimate不是免费的&#xff0c;我认为这就是为什么在…

创梦天地关嵩:借力腾讯云,打造文娱新生态——云+未来峰会回顾

欢迎大家前往腾讯云社区&#xff0c;获取更多腾讯海量技术实践干货哦~ 今年腾讯云未来峰会主题的关键词是“焕启”&#xff0c;这是包含无限希望的两个字&#xff0c;让人倍感振奋。“焕启”是什么意思&#xff1f;在我的理解中&#xff0c;“焕启”本身就是激活&#xff0c;激…

领域模型学习笔记

别在领域模型迷失了自己转载于:https://www.cnblogs.com/mySerilBlog/p/9914375.html

【缓存清理工具】缓存清理软件_电脑缓存清理软件

产品介绍 有很多种比如来自网页和windows等,缓存如果不经常清理会使你的机器运行速度变慢&#xff0c;缓存清理工具可以帮你最多程度的清理垃圾文件而且速度也很快&#xff0c;有了它的帮助让你爱机清理彻底&#xff0c;运行更加顺畅&#xff01;主要能清理&#xff1a;所有应…

c语言转义字符空格符号,C语言 转义符\t占用几个空格

这个问题&#xff0c;在你学习编程过程中可能会考虑到&#xff0c;有时为了字节对齐而使用转义符中\t,但是到底\t占用几个空格呢&#xff1f;下面我们首先通过程序来体验下&#xff0c;然后在总结#include int main(){printf("123456\t123\t45\n");printf("12\t…

检测Maven依赖中介

从Maven 2.0.9开始&#xff0c;向Maven添加了一个新功能&#xff0c;称为依赖中介。 依赖关系中介是Maven在特定情况下在依赖关系树中多次出现依赖关系时用来解决项目依赖关系的技术。 通常&#xff0c;这发生在通过项目的依赖关系链接的传递依赖关系上。 在这种情况下&#xf…

简单的节流函数throttle

在实际项目中&#xff0c;总会遇到一些函数频繁调用的情况&#xff0c;比如window.resize&#xff0c;mouseover&#xff0c;上传进度类似的触发频率比较高的函数&#xff0c;造成很大的性能损耗&#xff0c;这里可以使用节流函数来进行性能优化&#xff0c;主要是限制函数被频…

[探索] 利用promise做一个请求锁

在最近开发小程序的过程中&#xff0c;遇到一个需求&#xff0c;就是请求的时候header需要带上accessToken, accessToken是通过登陆接口返回的参数&#xff0c;可能会出现过期的情况&#xff0c;则需要重新登陆&#xff0c;所以每次加载小程序都会进行一次本地储存的accessToke…