svgr README

The project's README from github.com/gregberge/svgr. As one markdown file: README.md.

svgr

Transform SVGs into React components 🦁

License Donate npm package npm downloads CI Code Coverage

Try it out online!

Watch the talk at React Europe

SVGR is an universal tool to transform SVG into React components.

SVGR takes a raw SVG and transforms it into a ready-to-use React component.

Docs

See the documentation at react-svgr.com for more information about using svgr!

Quicklinks to some of the most-visited pages:

Example

Take a SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg
  width="48px"
  height="1px"
  viewBox="0 0 48 1"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
  <title>Rectangle 5</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g
      id="19-Separator"
      transform="translate(-129.000000, -156.000000)"
      fill="#063855"
    >
      <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
        <g id="Content" transform="translate(0.000000, 64.000000)">
          <g id="Group" transform="translate(24.000000, 56.000000)">
            <g id="Group-2">
              <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

Run SVGR

npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" -- icon.svg

Get an optimized React component

import * as React from 'react'

const SvgComponent = (props) => (
  <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
    <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
  </svg>
)

export default SvgComponent

Supporting SVGR

SVGR is a MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome backers. If you'd like to join them, please consider:

Learn more about supporting SVGR.

Contributing

Check out the contributing guidelines

License

Licensed under the MIT License, Copyright © 2017-present Greg Bergé.

See LICENSE for more information.

Acknowledgements

This project has been popularized by Christopher Chedeau and it has been included in create-react-app thanks to Dan Abramov. We would like to thanks Sven Sauleau for his help and its intuition.

svgr (gregberge/svgr)

Searching Database…

11.1K ·GitHub
Svgr
这是干什么的？SVGR 是一个通用工具，能把 SVG 文件转换成开箱即用的 React 组件：把原始的 SVG 喂给它，就能得到一个可以直接放进 React 项目里用的组件。
它是命令行工具、Webpack loader,还是一个库？三种都是：SVGR 提供了用于转换文件的命令行工具，提供了 Webpack loader 让你能把 SVG 直接引入构建流程，还提供了 Node.js API 方便用脚本批量处理。
我该怎么上手？完整文档在 react-svgr.com —— 从“Getting started”页面开始，不管你选择哪种集成方式，都有专门的使用指南。
我的电脑上需要装什么才能运行它？需要一个 Node.js 环境：SVGR 可以在命令行里运行，可以在 Webpack 构建过程中运行，也可以通过它的 Node.js API 在代码里调用。
它只是把我的 SVG 包进组件里，还是会顺便做优化？会做优化：README 里的示例就是把一个原始 SVG 转换成一个优化过的 React 组件，而且 SVGO 也是这个项目工具链的一部分。
它只生成网页端的 React 组件，还是也支持 React Native?React Native 也支持 —— 这个仓库把 react-native 列为核心主题之一，所以在网页端 React 之外也面向 RN 项目。
SVGR 靠谱吗？用的人多吗？非常靠谱：它经 Christopher Chedeau 推广后被纳入了 create-react-app,在 GitHub 上有大约 11k 颗星，而且至今仍是一个由赞助者支持的独立开发的 MIT 项目。
安装之前能不能先试试效果？可以 —— README 里链接了一个 react-svgr.com 上的在线 playground,把 SVG 粘贴进去，马上就能拿到 React 组件代码。
What are similar projects?svgo, mitosis, tamagui, razzle, angular-cli, oxc, blobatar, styled-components
Which topics is it in?jsx, webpack, react-native, svg, monorepo, web-development, command-line-tool, react, npm, frontend, tool, nodejs
Creator
gregberge
Size
15.7 MB
Stars
11.1K
Updated
CommitOct 05Releasev8.1.0Aug 15
Age
9y
Commits · 90 Days