Skip to content

Latest commit

 

History

History
140 lines (115 loc) · 3.9 KB

README.md

File metadata and controls

140 lines (115 loc) · 3.9 KB
Raw

styled-svg

Generate styled-components 💅 from SVG files

Build Status Known Vulnerabilities

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

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

name  type default description
fillColor String / null null override fill color of paths and other elements
fillColorRule String '&&& path, &&& use, &&& g' rule for selecting elements to colorize, you only need to change this, for complex svg structures.
size String / null / Object null one of the sizes keys, to set the size, or an object { width, height }
sizes Object {} Override possible sizes, example below (by default these are generated with the --size option, so you probably won't need this)

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