@twilio-labs/svg-to-react

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

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>
    {titleId => (
      <div style={{color, width: size, height: size}} className={className}>
        <svg 
          role="img"
          aria-hidden={decorative}
          height="100%"
          width="100%"
          viewBox="0 0 24 24"
          aria-labelledby={titleId}>
          {title ? <title id={titleId}>{title}</title> : null}
          <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 titleId = useUID();
    return (
      <div style={{color, width: size, height: size}} className={className}>
        <svg 
          role="img"
          aria-hidden={decorative}
          height="100%"
          width="100%"
          viewBox="0 0 24 24"
          aria-labelledby={titleId}>
          {title ? <title id={titleId}>{title}</title> : null}
          <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;