如何在react中使用svg icons

首先,react是支持svg,所以使用svg是没有问题的,但是到目前为止(版本为v15.3.0)还不支持svg的use标签,所以打算使用svg symbol还是趁早放弃,以下为官方的svg支持标签:

既然不能用svg symbol,那么只好把每个svg icon都定义为一个组件,如麦克风图标

class Mic extends React.Component {
 render() {
   return (
        <svg className="icon-svg icon-mic" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title">
            <title>mic</title>
            <path className="path1" d="M15 22c2.761 0 5-2.239 5-5v-12c0-2.761-2.239-5-5-5s-5 2.239-5 5v12c0 2.761 2.239 5 5 5zM22 14v3c0 3.866-3.134 7-7 7s-7-3.134-7-7v-3h-2v3c0 4.632 3.5 8.447 8 8.944v4.056h-4v2h10v-2h-4v-4.056c4.5-0.497 8-4.312 8-8.944v-3h-2z"></path>
        </svg>
   )
 }
};
export default Mic;

当然也可以定义为无状态组件:

function Mic(props) {
   return (
        <svg className="icon-svg icon-mic" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title">
            <title>mic</title>
            <path className="path1" d="M15 22c2.761 0 5-2.239 5-5v-12c0-2.761-2.239-5-5-5s-5 2.239-5 5v12c0 2.761 2.239 5 5 5zM22 14v3c0 3.866-3.134 7-7 7s-7-3.134-7-7v-3h-2v3c0 4.632 3.5 8.447 8 8.944v4.056h-4v2h10v-2h-4v-4.056c4.5-0.497 8-4.312 8-8.944v-3h-2z"></path>
        </svg>
   )
};

export default Mic;

如果这样一个个写,那也实在是太麻烦了,于是搞了个fis3插件,自动把svg转jsx组件fis3-parser-svg-to-react-component

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Vamei实验室

被解放的姜戈05 黑面管家

Django提供一个管理数据库的app,即django.contrib.admin。这是Django最方便的功能之一。通过该app,我们可以直接经由web页面,...

1899
来自专栏乐百川的学习频道

JavaFX 简介

JavaFX 介绍 一提到Java的图形界面库,我们通常听到的都是Swing,或者更老一点的AWT,包括很多书上面介绍的也都是这两种。很多学校、培训班教学的也是...

2997
来自专栏菩提树下的杨过

WPF:自动执行"机器人"程序若干注意事项

企业应用中,经常会遇到一些需要定时自动执行的程序来完成某些功能,比如:自动定时从第三方web service取回数据、定时对历史数据进行清理、定时向ftp上传业...

1738
来自专栏琯琯博客

Git 提交规范

一直是 ESLint 的忠实用户,深知规范的重要性。然而,在新项目交接中,我被 Git Commit 规范逼疯了。才意识到自己的疏忽,于是便有了一探究竟的想法。

522
来自专栏无原型不设计

优秀原型设计欣赏:阅读类App原型制作-Another Read

Another Read是一款阅读学习App,它主要是带给你最具创意的作家与插图画家出版的儿童读物。在这款App中,你可以根据喜好来左滑或者右滑书籍,喜欢的书籍...

2295
来自专栏程序猿DD

你可能会忽略的 Git 提交规范

来源:http://jartto.wang/2018/07/08/git-commit/?hmsr=toutiao.io&utm_medium=toutiao....

1235
来自专栏张善友的专栏

SharpForge - Open source SourceForge / CodePlex implementation

SharpForge - Open source SourceForge / CodePlex implementation SharpForge suppo...

17110
来自专栏程序员的碎碎念

Layer弹层组件

前几天了解到这个不错的弹层插件,样式好看,用起来也方便。喜欢的人看完我的博客也可以看官方网站哦:http://www.layui.com 在这个官方网站里有关于...

3585
来自专栏张善友的专栏

JQuery相关资料

将SEO,WEB标准与AJAX进行到底 - JQuery(翻译+学习总结) jQuery——JavaScript冲击波 《15天漫游jQuery》 小试牛刀——...

1888
来自专栏DeveWork

【译】WordPress 中的50个过滤器(3):第11-20个过滤器

本文为系列第三篇,原文:50 Filters of WordPress: Filters 11-20 原文地址 不多说,直接进入正题。 本系列文章翻译自tut...

1956

扫码关注云+社区