前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何在react中使用svg icons

如何在react中使用svg icons

作者头像
IMWeb前端团队
发布2019-12-04 15:16:20
1.5K0
发布2019-12-04 15:16:20
举报
文章被收录于专栏:IMWeb前端团队

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载

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

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

代码语言:javascript
复制
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;

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

代码语言:javascript
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-06-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档