dls-icons-react

Installation

npm i -D dls-icons-react

Usage

As React component

Demo →

import { IconArrowRight } from 'dls-icons-react'

export default function Title() {
  return (
    <div className="title">
      <h1>
        Hello Icons
        <IconArrowRight style={{ color: '#999', marginLeft: 5 }} />
      </h1>
    </div>
  )
}

Props

spin: boolean

Whether the icon is spinning. Default: false. You can use --dls-icon-spin-duration to customize the time it takes for one turn. The default value is 1s.

active: boolean

Whether the icon is active. Default: undefined. If active is undefined, the icon will be in default state. Otherwise it will be in active or inactive state depending on the truthiness of active.

Note To make active prop work properly, you should render a SharedResources component in your root component. eg.

import { SharedResources } from 'dls-icons-react'

export default function App() {
  return (
    <div className="app">
      <SharedResources />
      ...
    </div>
  )
}

As icon data

import { dataArrowRight } from 'dls-icons-react'

/*
{
  {
    name: 'icon-arrow-right',
    content: '<path d="..." ...',
    width: 24,
    height: 24
  }
}
*/
console.log(dataArrowRight)

Available Icons