https://github.com/mapbox/svg-react-transformer

Transform SVG into JSX or React component modules
https://github.com/mapbox/svg-react-transformer

frontend-shared frontend-tooling

Last synced: 3 months ago
JSON representation

Transform SVG into JSX or React component modules

• Host: GitHub
• URL: https://github.com/mapbox/svg-react-transformer
• Owner: mapbox
• Archived: true
• Created: 2017-06-17T18:46:03.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2023-11-09T16:07:52.000Z (almost 1 year ago)
• Last Synced: 2024-07-20T03:13:46.891Z (4 months ago)
• Topics: frontend-shared, frontend-tooling
• Language: JavaScript
• Size: 920 KB
• Stars: 44
• Watchers: 102
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# @mapbox/svg-react-transformer

[![Build Status](https://travis-ci.com/mapbox/svg-react-transformer.svg?branch=main)](https://travis-ci.com/mapbox/svg-react-transformer)

Transform SVGs into JSX or React component modules.

This monorepo includes the following packages:

- [**@mapbox/svg-react-transformer**](./packages/svg-react-transformer) includes the core, low-level transform functions to convert an SVG into JSX or React component modules. These functions take one string and output another string. They can be used by higher-level modules that target specific contexts, like the following ...

- [**@mapbox/svg-react-transformer-writer**](./packages/svg-react-transformer-writer) is a CLI and Node API for running SVG files through svg-react-transformer and writing the React component modules to new files. Takes an SVG file, outputs a JS file.

- [**@mapbox/svg-react-transformer-loader**](./packages/svg-react-transformer-loader) is a Webpack loader that transforms SVG files into React component modules. Allows you to `import` SVG files within Webpack-compiled JS and get a React component.

For example, given an SVG like this:

```svg

  

```

You can get a React component module like this:

```jsx

const React = require("react");

class SvgComponent extends React.PureComponent {

  render() {

    return (

      

        

      

    );

  }

}

module.exports = SvgComponent;

```

Or a fancier React component module like this:

```jsx

"use strict";

const React = require("react");

class SvgComponent extends React.PureComponent {

  render() {

    const containerStyle = this.props.containerStyle || {};

    if (!containerStyle.position || containerStyle.position === "static") {

      containerStyle.position = "relative";

    }

    containerStyle.paddingBottom = "100%";

    const svgStyle = this.props.svgStyle || {};

    svgStyle.position = "absolute";

    svgStyle.overflow = "hidden";

    svgStyle.top = 0;

    svgStyle.left = 0;

    svgStyle.width = "100%";

    const text = !this.props.alt ? null : (

      
{this.props.alt}

    );

    return (

      


        

          

        

        {text}

      

    );

  }

}

module.exports = SvgComponent;

```


## Development

`npm install` to get all the dependencies and linking hooked up.

`lerna bootstrap` runs in a `postinstall` script.

(If you are experiencing errors, in linting or at runtime, about missing or fouled-up dependencies, you probably need to rerun installation & bootstrapping.)

Jest is installed at the top level, so you can test all repos by with `npx jest` or `npm test`.

Release with `mbx npm login && lerna publish --skip-npm && lerna exec mbx npm publish --tag latest`.