Transform an SVG into a React Component with SVGR

栏目: IT技术 · 发布时间: 4年前

内容简介:SVGs (Scalable Vector Graphics) are an XML-based vector images used to define 2D graphics. An SVG file has theSVGs are used in websites/webpages to seamlessly integrate 2D graphics into HTML. Recently, with the rise of Web Frameworks (Svelte, React, Angula

How to transform SVGs into a collection of reusable React components.

Transform an SVG into a React Component with SVGR

SVGs (Scalable Vector Graphics) are an XML-based vector images used to define 2D graphics. An SVG file has the .svg file extension.

SVGs are used in websites/webpages to seamlessly integrate 2D graphics into HTML. Recently, with the rise of Web Frameworks (Svelte, React, Angular, React, etc) SVGs have been a major occurrence and now largely used to embed images in components as icons.

In this post, we‘ll convert SVGs to React components using SVGR .

We will then publish them, as independent components, to Bit.dev , a cloud component hub, and make them available for all our projects.

Why convert SVGs into React components?

  • Size reduction: SVG-to-React component conversion shaves off some excess SVG styling.
  • No extra requests are made by the browser to fetch SVG images since they are now bundled with the JS.
  • It allows for easier control and maintenance of SVGs since they are now React components.
  • Verbose and obscure SVGs can be converted to customizable React components that expose a simple declarative API.

SVG and React

A common example of an SVG being used in React is non-other than the famous logo.svg generated by create-react-app when scaffolding a new React project.

- react-prj/
    -src/
        - logo.svg
        ...
    ...
    - package.json

The logo.svg is the React logo:

Converting an SVG to a React component simply means creating a React component that renders an SVG. This does away with having extra .svg files lying around.

For example, we can create a React component that returns the React logo.svg XML:

Then, we can use it anywhere:

There is no <img src={logo} className="App-logo" alt="logo" /> . It's been replaced with <ReactLogo /> . And there will be no need of logo.svg because everything is in the ReactLogo component.

Here we manually converted the React icon SVG into a React component, but we can save ourselves some time by using SVGR to automate this process.

Using SVGR in the Command-Line

Transform an SVG into a React Component with SVGR

To use SVGR from command-line, install the CLI tool:

npm install @svgr/cli

Then, we call SVGR in the command-line, passing in the .svg file and other flags to replace different attributes with our own values.

svgr --icon --replace-attr-values "#063855=currentColor" logo.svg

The above command will take our logo.svg file and convert it to a React component.

We can then copy the output shown in our terminal and create a new Logo.jsx component.

Publish Converted Components to Bit.dev

Transform an SVG into a React Component with SVGR
Bit.dev

Now that we have our logo.svg file as a React component Logo.jsx we can publish it to our collection on Bit. This way, we’ll make it available for our team to use in other projects.

Let’s install Bit globally on our machine:

$ npm install bit-bin --global

We’ll now initialize a Bit workspace in our project’s root directory:

$ cd svg-icons-project
$ bit init

We can add multiple components at once but for this small demo we’ll specifically pick our Logo component:

$ bit add src/Logo.jsx

Now, since it is a React component we’ll need to configure a compiler for it (otherwise it would be coupled to our projects build setup — we don’t want that. We want our published components to move freely from one project to another).

The compiler is another component published on Bit. The --compiler flag is our way to mention it should be used as a compiler.

$ bit import bit.envs/compilers/react --compiler

We’ll now tag our component with a version number

$ bit add --all 1.0.0

Login to our account (via our terminal)

$ bit login

And, finally, publish (‘export’) our component to the collection we’ve created on Bit.dev .

$ bit export chidume.svg-components

I’ve published another two converted components. Feel free to visit my component collection .

Transform an SVG into a React Component with SVGR
My SVGs converted to React components and published to Bit.dev

以上所述就是小编给大家介绍的《Transform an SVG into a React Component with SVGR》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

断层地带

断层地带

杰弗里·摩尔 (Geoffrey A.moore) 著 / 季晓楠,凌炜 译 / 机械工业出版社 / 2009-1 / 33.00元

从股东权益谈起,并把“股东权益管理”作为根本立场,明确阐述了公司市场价值的内涵:在竞争环境中,公司的市场价值等于在当前和计划的生产经营活动下,未来可预计的收益用风险系数贴现后的现值。断层地带:经济中的危险境地,在这里勇敢的创新者给市场带来了惨烈的竞争,撕杀得天昏地暗。每家公司都处在这样的环境中,但是没有一个管理者能够控制它。一起来看看 《断层地带》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具