svg-icon-react

what are we doing here?

The package takes a folder of SVGs, and will create a sprite.svg and svgEnum.js file - which contains names and dimensions for each svg.

The dimensions are scraped from the viewbox, and can help provide a consistant way of displaying svgs. No more worrying about whitespace, menu icon sizes or icon heights in text...

This package also provides a react component, ready to take sprite and enum file!

Beckon thou gods of install

// cli
 
yarn add react-icon
 
// you've probably done that while skim reading to be fair

Run the track

// package.json
 
"scripts": {
  "svgsprite": "extract-svg-data ./path-to-assets ./output-folder",
}

cool, I should probably think of more words for here really. Phil Collins is definitely {under|over} rated. Weather has been nice laterly...

execute icon sexiness

import ReactIcon from 'react-icons';
import sprite from 'whereever/you/put/it/sprite.svg'
import svgEnum from 'whereever/you/put/it/iconEnum.js'
 
const YourIconComponent = (
  { iconName, width, height, direction, scale, unitType }
) => (
  <ReactIcon 
    // These are the data ones
    sprite={sprite}
    svgEnum={svgEnum}
    // and these are the actual display props
    iconName={iconName}
    width={width}
    height={height}
    direction={directin}
    scale={scale}
    unitType={unitType}
  />
)
 
 
// and you can then use it like so:
 
<YourIconComponent iconName={svgEnum.GENESIS} width={30} unitType={'px'}>
 

aye?

If you pass only width or height you svg will scale the undefined value based on its viewbox. If you pass both values the icon will always stay constrained but its DOM element will take up the correct space - it'll just fill it best it can.