styled-svg

Generate styled-components 💅 from SVG files

What's this?

This utility generates React components, using the styled.svg function. Just drop the .svg somewhere in the project, run the tool and start using your svg files as inline svg with all React and styled-components beauty. As a bonus, all svg files are optimized, using the awesome svgo library.

How it looks like

• Input warning.svg
• Command npx styled-svg **/*.svg --size=small:18x18 --size=medium:24x24 --size=large:36x36
• Output
  • Styled component: Warning.js
  • Tests Warning.test.js

Usage of the generated component

import React from 'react'
import Warning from './Warning'

const ComponentWithImage = props => (
  <div>
    {props.children}
    <Warning size='medium' fillColor='red' />
  </div>
)

export default ComponentWithImage

Props of the generated components

sizes prop example

const sizes = {
  small: { width: 18, height: 18 },
  medium: { width: 24, height: 24 },
  large: { width: 36, height: 36 }
}

Overriding styles

As the components are just regular styled-components, overriding styles is easy. Note if you just want to change colors for hover and other state-changes, you can use the fillColor prop of the generated components.

import React from 'react'
import styled from 'styled-components'
import Warning from './Warning'

const CustomizedWarning = styled(Warning)`
  width: 100%;
  border-radius: 3px;
`

Usage

npm scripts usage (recommended)

Install the dependency

npm i --save-dev styled-svg

Create a npm script entry in your package.json

{
  //...
  "scripts": {
    "svg": "styled-svg src/**/*.svg --size=small:18x18 --size=medium:24x24"
  },
  //...
}

Then run npm run svg at any time to generate Components

JS usage

Install the dependency

npm i --save-dev styled-svg

JS example

const convert = require('styled-svg')

// options have the same defaults as the command line usage
const options = {
  clean: true,
  dryRun: false
  noTests: false,
  outputDir: './output',
  templatesDir: : './templates',
  testDir: './output',
  size: [
    'small:18x18',
    'medium:24x24'
  ]
}
const files = [
  'path/to/file/a.svg',
  'path/to/file/b.svg',
  'path/to/file/c.svg'
]

// returns a promise that resolves to an array of results
convert(files, options)

Command line usage

Install the package globally

npm i -g styled-svg

Run it in any directory

styled-svg **/*.svg

Changelog

All changes are logged in releases.

Known issues / unimplemented features

• Improve test coverage
• Make it usable in JS with specifying svg strings directly, not only file paths

Licence

MIT

Credits

• Thanks svg2react for some inspiration how to handle attributes