Skip to content
Converts SVG assets into accessible React components with smart default props
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
__tests__
src chore: Migrate from tslint to eslint (#7) Oct 15, 2019
.editorconfig Initial commit Jul 23, 2019
.eslintrc.json chore: Migrate from tslint to eslint (#7) Oct 15, 2019
.gitignore Initial commit Jul 23, 2019
.prettierrc Initial commit Jul 23, 2019
LICENSE
RATIONALE.md chore: touchups to readme and rationale files Jul 24, 2019
README.md
index.js Initial commit Jul 23, 2019
jest.config.js Initial commit Jul 23, 2019
package.json
tsconfig.json
tsconfig.release.json Initial commit Jul 23, 2019
yarn.lock chore: Migrate from tslint to eslint (#7) Oct 15, 2019

README.md

@twilio-labs/svg-to-react

A utility to convert raw SVG files into accessible and extendable React Components. Why icon components?.

Code of Conduct PRs Welcome


Installation

# Yarn
yarn add @twilio-labs/svg-to-react --dev

# NPM
npm i @twilio-labs/svg-to-react --save-dev

Usage

CLI

Follow the on-screen instructions after running

yarn build
yarn convert

NodeJS

const fs = require('fs');
const {convertSvgToReact} = require('@twilio-labs/svg-to-react');

fs.readFile(`path/to/file`, 'utf8', async (err, fileContents) => {
    // TODO: Handle error case here

    // Convert the SVG into our ideal format
    // Arguments: SVG Contents, Options
    const generatedComponent = await convertSvgToReact(fileContents, {useHooks: false});

    fs.writeFile(`path/to/output/file`, generatedComponent, 'utf8', err => {
        // TODO: Handle error case here
    });
});

Options

option name type details
useHooks boolean Whether to use 'hooks', a feature only available in React 16.7+
template function Allows you to pass your own template function.

Dependencies

The generated React component depends on react-uid for accessibility by default. We recommend this library for unique ID generation to satisfy accessibility needs. You can avoid this dependency by providing a custom template.

Contributing

This project welcomes contributions from the community.

Code of Conduct

Please be aware that this project has a Code of Conduct. The tl;dr is to just be excellent to each other ❤️

Maintainers

This project is maintained by the design systems team.


Example

This project is used by Twilio's internal design system. Check it out to see how we use a custom template to make this even more powerful.

Demo

Input

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
  .st0{fill:#001833;}
</style>
<path id="path-1_1_" class="st0" d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8
  s3.6-8,8-8s8,3.6,8,8S16.4,20,12,20z M14.3,15.3H16L12.9,8h-1.7L8,15.3h1.7l0.6-1.4h3.4L14.3,15.3z M10.8,12.6L12,9.7l1.2,2.8h-2.4
  V12.6L10.8,12.6z"/>
</svg>

Output (useHooks = false)

/**!
 * This file was automatically generated with @twilio-labs/svg-to-react
 */
import React from 'react';
import {UID} from 'react-uid';

export interface AutomaticIconProps {
  className?: string;
  size?: number;
  color?: string;
  title?: string;
  decorative?: boolean;
}

const AutomaticIcon = ({title = 'Automatic Icon', decorative = true, className, color, size}: AutomaticIconProps) => (
  <UID>
    {uid => (
      <div style={{color, width: size, height: size}} className={className}>
        <svg role="img" aria-hidden={decorative} aria-labelledby={uid} height="100%" width="100%" viewBox="0 0 24 24">
          <title id={uid}>{title}</title>
          <path
            fill="currentColor"
            d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm2.3-4.7H16L12.9 8h-1.7L8 15.3h1.7l.6-1.4h3.4l.6 1.4zm-3.5-2.7L12 9.7l1.2 2.8h-2.4v.1z"
          />
        </svg>
      </div>
    )}
  </UID>
);

export default AutomaticIcon;

Output (useHooks = true)

/**!
 * This file was automatically generated with @twilio-labs/svg-to-react
 */
import React from 'react';
import {useUID} from 'react-uid';

export interface AutomaticIconProps {
  className?: string;
  size?: number;
  color?: string;
  title?: string;
  decorative?: boolean;
}

const AutomaticIcon = React.memo(
  ({title = 'Automatic Icon', decorative = true, className, color, size}: AutomaticIconProps) => {
    const uid = useUID();
    return (
      <div style={{color, width: size, height: size}} className={className}>
        <svg role="img" aria-hidden={decorative} aria-labelledby={uid} height="100%" width="100%" viewBox="0 0 24 24">
          <title id={uid}>{title}</title>
          <path
            fill="currentColor"
            d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm2.3-4.7H16L12.9 8h-1.7L8 15.3h1.7l.6-1.4h3.4l.6 1.4zm-3.5-2.7L12 9.7l1.2 2.8h-2.4v.1z"
          />
        </svg>
      </div>
    );
  }
);

export default AutomaticIcon;
You can’t perform that action at this time.