Namespace, Primitive, Method

    svg-to-react-cli

    1.5.0 • Public • Published

    svg-to-react-cli

    A command line utility that takes a svg image file and outputs a fully formatted stateless functional React component with height and width for props. With flags to toggle formatting and remove style attributes.

    To Use

    npm install -g svg-to-react-cli

    One File

    svgtoreact <svgImage> <ComponentName>

    NOTE: image file must be in current working directory. Do not add the extention. If file is image.svg, then just enter image as the first argument. ComponentName will be the name of the sfc and filename with .js appended.

    Multi File

    svgtoreact dir

    or for all files in directory (will name all components in CamelCase based on image name. If image is image.svg then new component will be Image and file will be Image.js):

    Flags

    Or use flags: svgtoreact <svgImage> <ComponentName> --output ./components/svgComponents/ --no-format --rm-style

    Optional Flags:

    -o, --output <path> - the output path. Do not include the filename.

    --no-format - will skip line breaks and indentation to svg. If your svg is already formatted, use this flag.

    --rm-style - removes all style attributes from svg tags.

    --help - Prints out this readme.

    --example - Prints an example of the i/o of this util.

    Example

    Takes this:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><defs><filter id="glow"><feGaussianBlur stdDeviation="7" result="coloredBlur"></feGaussianBlur><feMerge><feMergeNode in="coloredBlur"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><circle cx="256" cy="256" r="256" fill="#f5a623" opacity="1" stroke="#fff" stroke-width="0"></circle><path fill="#000000" opacity="1" d="M363.783 ..." transform="translate(25.6, 25.6) scale(0.9, 0.9) rotate(0, 256, 256)" clip-path="false" filter="url(#glow)"></path><g font-family="Arial, Helvetica, sans-serif" font-size="120" font-style="normal" font-weight="bold" text-anchor="middle" class="" transform="translate(256,300)" style="touch-action: none;"><text stroke="#000" stroke-width="30" opacity="1"></text><text fill="#fff" opacity="1"></text></g></svg>

    And creates a new file with this:

    import React from 'react';
     
    export default function NewThing(props) {
      return (
        <svg xmlns="http://www.w3.org/2000/svg" style={{height: 512, width: 512}} viewBox="0 0 24 24" width={24} height={24} {...props}>
      <defs>
        <filter id="glow">
          <feGaussianBlur stdDeviation="7" result="coloredBlur"></feGaussianBlur>
          <feMerge>
            <feMergeNode in="coloredBlur"></feMergeNode>
            <feMergeNode in="SourceGraphic"></feMergeNode>
          </feMerge>
        </filter>
      </defs>
      <circle cx="256" cy="256" r="256" fill="#f8e71c" opacity="1" stroke="#fff" strokeWidth="0"></circle>
      <path fill="#50e3c2" opacity="1" d="M149.25 18.313L168.156 ..." clipPath="false" filter="url(#glow)"></path>
      <g fontFamily="Arial, Helvetica, sans-serif" fontSize="120" fontStyle="normal" fontWeight="bold" textAnchor="middle" class="" transform="translate(256,300)" style={touchAction: "none"}>
        <text stroke="#000" strokeWidth="30" opacity="1"></text>
        <text fill="#fff" opacity="1"></text>
      </g>
    </svg>
     
      );
    }

    Width / height order of precedence

    The order of precedence of how width/height is set on a generated component is as follows:

    • 1 - Passed in width and height props are always priority one. This gives run time control to the container.
    • 2 - If a svg has its width/height set, this will be the first fallback if width/height props are not provided.
    • 3 - If the svg has not provided width/height attributes, the svg's viewbox's width/height segments are used as the fallback if width/height props are not provided.
    • 4 - Finally, if the svg has no width/height attributes, and the svg also doesn't have a viewbox - a fallback of 50px is applied to the width and height

    Install

    npm i svg-to-react-cli

    DownloadsWeekly Downloads

    343

    Version

    1.5.0

    License

    ISC

    Last publish

    Collaborators

    • goopscoop