专栏首页IMWeb前端团队如何在react中使用svg icons

如何在react中使用svg icons

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

首先,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 条评论
登录 后参与评论

相关文章

  • 如何在react中使用svg icons

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

    IMWeb前端团队
  • weex体验报告

    第一个问题: weex是啥? 官网:戳这里 A framework for building Mobile cross-platform UI 英语不...

    IMWeb前端团队
  • weex体验报告

    英语不好不知道这句话是什么意思,用google翻译了一下是:《一种用于构建移动跨平台的UI框架》,阿里百川出品。

    IMWeb前端团队
  • 如何在react中使用svg icons

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

    IMWeb前端团队
  • SVG可伸缩的矢量图形

    SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述。即对矢量图的描述

    mySoul
  • SVG 图标在React项目中的优化

    官方文档:https://webpack.docschina.org/loaders/url-loader/

    javascript.shop
  • 前端-SVG 图像入门教程

    SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是...

    grain先森
  • SVG 图像入门教程

    SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是...

    ruanyf
  • 2016年RSA会议和物联网

    世界领先的信息安全会议和展览会2016年RSA大会今天在旧金山的Moscone中心揭幕。会议结束了第25年,会议聚集了顶尖的信息安全专业人员和商业领袖,讨论新兴...

    首席架构师智库
  • Eclipse插件之JadClipse EclipseBBSthread工作

    http://dev2dev.bea.com.cn/bbs/thread.jspa?forumID=124&threadID=32364

    阿敏总司令

扫码关注云+社区

领取腾讯云代金券