1.0.0 • Published 3 years ago

react-svgbox v1.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
3 years ago

react-svgbox

Simple React components for using the svgbox.net API.

npm Travis (.com)

Documentation

Table of Contents

Installation

yarn add react-svgbox

Basic Usage

import React, { Component } from 'react'

import Icon from 'react-svgbox'

class Example extends Component {
  render() {
    return (
      <Icon
        className='example'
        fillColor='000000'
        iconSet='loaders'
        icon='three-dots'
      />
    )
  }
}

Components

Icon (default)

The Icon component is the "catch all" component for the main icon sets.

Usage

import React, { Component } from 'react'

import Icon from 'react-svgbox'

class Example extends Component {
  render() {
    return (
      <Icon
        className='example'
        fillColor='000000'
        iconSet='loaders'
        icon='three-dots'
      />
    )
  }
}

Props

PropDescription
classNameAny additional classes you want to add.
iconSetThe icon set you want to use. Options are social, materialui, hero-solid, hero-outline, and loaders.
iconThe name of the icon you want to render.
fillColorThe color you want the icon to be. Fill color can be in multiple formats.

Social

The Social component can be used to render icons from the Social, Web, and Apps icon set.

Usage

import React, { Component } from 'react'

import { Social } from 'react-svgbox'

class Example extends Component {
  render() {
    return <Social className='example' fillColor='000000' icon='airbnb' />
  }
}

Props

PropDescription
classNameAny additional classes you want to add.
iconThe name of the icon you want to render.
fillColorThe color you want the icon to be. Fill color can be in multiple formats.

MaterialUi

The MaterialUi component can be used to render icons from the Material UI icon set.

Usage

import React, { Component } from 'react'

import { MaterialUi } from 'react-svgbox'

class Example extends Component {
  render() {
    return <MaterialUi className='example' fillColor='000000' icon='bolt' />
  }
}

Props

PropDescription
classNameAny additional classes you want to add.
iconThe name of the icon you want to render.
fillColorThe color you want the icon to be. Fill color can be in multiple formats.

Heroicons (Outline)

The HeroOutline component can be used to render icons from the Heroicons (Outline) icon set.

Usage

import React, { Component } from 'react'

import { HeroOutline } from 'react-svgbox'

class Example extends Component {
  render() {
    return <HeroOutline className='example' fillColor='000000' icon='archive' />
  }
}

Props

PropDescription
classNameAny additional classes you want to add.
iconThe name of the icon you want to render.
fillColorThe color you want the icon to be. Fill color can be in multiple formats.

Heroicons (Solid)

The HeroSolid component can be used to render icons from the Heroicons (Solid) icon set.

Usage

import React, { Component } from 'react'

import { HeroSolid } from 'react-svgbox'

class Example extends Component {
  render() {
    return <HeroSolid className='example' fillColor='000000' icon='user-add' />
  }
}

Props

PropDescription
classNameAny additional classes you want to add.
iconThe name of the icon you want to render.
fillColorThe color you want the icon to be. Fill color can be in multiple formats.

Loading Animations

The Loader component can be used to render icons from the Loading Animations icon set.

Usage

import React, { Component } from 'react'

import { Loader } from 'react-svgbox'

class Example extends Component {
  render() {
    return <Loader className='example' fillColor='000000' icon='three-dots' />
  }
}

Props

PropDescription
classNameAny additional classes you want to add.
iconThe name of the icon you want to render.
fillColorThe color you want the icon to be. Fill color can be in multiple formats.

Flags

The Flag component can be used to render icons from the Flags (Low Def) and Flags (High Def) icon sets.

Usage

Low Def Flag
import React, { Component } from 'react'

import { Flag } from 'react-svgbox'

class Example extends Component {
  render() {
    return <Flag flag='us' quality='low' />
  }
}
High Def Flag
import React, { Component } from 'react'

import { Flag } from 'react-svgbox'

class Example extends Component {
  render() {
    return <Flag flag='us' quality='high' />
  }
}

Props

PropDescription
flagThe flag icon you want to render.
qualityThe quality of the flag icon you want to render. Value can be low for low def or high for high def. If no quality is provided, high will be used.

Pattern Backgrounds

The Pattern component can be used to render background patterns from the Pattern Backgrounds icon set.

Usage

import React, { Component } from 'react'

import { Pattern } from 'react-svgbox'

class Example extends Component {
  render() {
    return (
      <Pattern
        className='example-class'
        pattern='4-point-stars'
        fillColor='purple-600'
        bgColor='#fff'
        bgSize='32px'
      >
        <h1>Hello World</h1>
      </Pattern>
    )
  }
}

Props

PropDescription
classNameAny additional classes you want to add.
patternThe name of the pattern you want to render.
fillColorThe color you want the icon to be. Fill color can be in multiple formats.
bgColorThe background color of the wrapping div that is rendered. The value can be any valid CSS color format.
bgSizeThe size of the pattern icon used to create the pattern background.

Specifying Fill Color

Most components accept a fillColor prop for specifying the fill color of the icon/pattern. This prop supports multiple formats:

  • Hex Format: f50a0a
  • RGB Format: rgb(41,152,0)
  • HSL Format: hsl(14,100%,30%)
  • Tailwind Colors: purple-600
  • HTML5 Common Colors: violet

License

MIT © GeoffSelby

@everything-registry/sub-chunk-2616
1.0.0

3 years ago