react-svgbox

Simple React components for using the svgbox.net API.

Documentation

Table of Contents

• Installation
• Basic Usage
• Components
  • Icon (default)
    • Usage
    • Props
  • Social
    • Usage
    • Props
  • MaterialUi
    • Usage
    • Props
  • Heroicons (Outline)
    • Usage
    • Props
  • Heroicons (Solid)
    • Usage
    • Props
  • Loading Animations
    • Usage
    • Props
  • Flags
    • Usage
      • Low Def Flag
      • High Def Flag
    • Props
  • Pattern Backgrounds
    • Usage
    • Props
• Specifying Fill Color
• License

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

| Prop | Description | | --------- | -------------------------------------------------------------------------------------------------------------- | | className | Any additional classes you want to add. | | iconSet | The icon set you want to use. Options are social, materialui, hero-solid, hero-outline, and loaders. | | icon | The name of the icon you want to render. | | fillColor | The 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

| Prop | Description | | --------- | --------------------------------------------------------------------------------------------------- | | className | Any additional classes you want to add. | | icon | The name of the icon you want to render. | | fillColor | The 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

| Prop | Description | | --------- | --------------------------------------------------------------------------------------------------- | | className | Any additional classes you want to add. | | icon | The name of the icon you want to render. | | fillColor | The 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

| Prop | Description | | --------- | --------------------------------------------------------------------------------------------------- | | className | Any additional classes you want to add. | | icon | The name of the icon you want to render. | | fillColor | The 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

| Prop | Description | | --------- | --------------------------------------------------------------------------------------------------- | | className | Any additional classes you want to add. | | icon | The name of the icon you want to render. | | fillColor | The 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

| Prop | Description | | --------- | --------------------------------------------------------------------------------------------------- | | className | Any additional classes you want to add. | | icon | The name of the icon you want to render. | | fillColor | The 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

| Prop | Description | | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | flag | The flag icon you want to render. | | quality | The 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

| Prop | Description | | --------- | --------------------------------------------------------------------------------------------------------- | | className | Any additional classes you want to add. | | pattern | The name of the pattern you want to render. | | fillColor | The color you want the icon to be. Fill color can be in multiple formats. | | bgColor | The background color of the wrapping div that is rendered. The value can be any valid CSS color format. | | bgSize | The 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