如何在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 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 UWP 圆形等待

使用 RectangleStyle1 在 Rectangle 使用 style="{StaticResource RectangleStyle1}"

482
来自专栏优启梦

给网站添加好看的底部功能按钮

在一些博客手机版会看到底部有些按键很好看! 跟下面图片的一样,把代码自行添加到合适位置就可以了!。 只在手机版显示 ? <style type="text/cs...

3758
来自专栏听雨堂

为服务器控件加入客户端事件处理的几种方法

    服务器端的处理虽然方便,但因为每次都要PostBack,因而效率不高,很多时候需要为服务器端控件写入客户端事件处理。把各种方法总结一下:     1)在...

1818
来自专栏小白鼠

Ionic3 高德Web定位

高德提供了Web平台定位的JS API,同样需要用到 APP_Key,并且需要注意是使用Web端的Key,如下图所示。必须是Web端的,其它平台的无效。 ht...

732
来自专栏破晓之歌

移动web开发适配秘籍Rem(推荐) 原

611
来自专栏自动化测试实战

Flask第36篇——模板项目实战(二)

前面我们利用宏将首页代码进行了第一次优化。如果我们现在还有其他页面,试想一下,首页上面的搜索框

573
来自专栏Java修行之道

java图片验证码乱码问题

在本地电脑上查询"Times New Roman”这种字体(路径:C:/Windows/Fonts):

2672
来自专栏好好学习吧

在博文顶部添加文章字数及阅读时间信息:阅读本文需要xx分钟

856
来自专栏一“技”之长

Bootstrap响应式前端框架笔记十九——标签页的使用

    Bootstrap中通过为导航标签增加data-toggle="tab",配合类或id来进行标签页的关联,示例如下:

701
来自专栏韩东吉的Unity杂货铺

零基础入门 18: UGUI Slider

现在教程的思路是按照UGUI的组件进行逐一的讲解,先是在Unity里的操作设置,以及代码段的操作控制。上一篇Toggle讲解之后,这篇就是UGUI里的Slide...

631

扫码关注云+社区