@twilio-labs/svg-to-react
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    @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>
        {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;

    Keywords

    none

    Install

    npm i @twilio-labs/svg-to-react

    DownloadsWeekly Downloads

    19

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    21.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • pastebot