Package Exports

@idui/react-icon

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@idui/react-icon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Icon React Component

Install

npm install --save @idui/react-icon

yarn add @idui/react-icon

See props in Docs

Configuration

you can call configureIcons as many times as you want, icons will be merged
color, which you want to specify in props should be currentColor (e.g fill="currentColor", stroke="currentColor")

import React, { Fragment } from 'react';
import { configureIcons } from "@idui/react-icon";

configureIcons({
    // [name]: {
    //     viewBox: svg viewBox,
    //     content: <Fragment>
    //         // svg inner content
    //     </Fragment>
    // }

    search: {
        viewBox: '0 0 19 20',
        content: <Fragment>
            <path d="M12 12.5L18.0001 18.364" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            <path d="M13.7025 7.5C13.7025 11.1088 10.8401 14 7.35124 14C3.86234 14 1 11.1088 1 7.5C1 3.89117 3.86234 1 7.35124 1C10.8401 1 13.7025 3.89117 13.7025 7.5Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        </Fragment>
    },
    add: {
        viewBox: '0 0 12 12',
        content: <Fragment>
            <rect x="5" width="2" height="12" rx="1" fill="currentColor"/>
            <rect y="7" width="2" height="12" rx="1" transform="rotate(-90 0 7)" fill="currentColor"/>
        </Fragment>
    },
})

Usage Example

import React from 'react'
import Icon from '@idui/react-icon'

function Example() {
  return <Icon 
      name="add"
      color="gray" 
      hoverColor="black"
      size="2rem"
      cursor="pointer"
  />
}

JSPM

@idui/react-icon