Uicons-react NPM

uicons-react

Uicons is a lib of highly customizable and elegant icons, really. Explore all our icons at uicons.io.

Installation

yarn add uicons-react

npm install uicons-react

Usage

Just import the icons you need, and add in component or page. IMPORTANT! your bundle only includes code for the icons you use.

import { Bookmark, BookmarkAdd, BookmarkBlocked, ArchiveBox } from "uicons-react";

export function Component(){
  return (
    <div>
      <Bookmark />
      <BookmarkAdd color="#fac800" weight="outline" size={32} />
      <BookmarkBlocked className="icon-class" weight="fill" size={32} />
      <ArchiveBox
        size={28}
        weight="custom"
        customColors={{
          fill: '#fff', // optional if you don't want the icon to have a fill color
          outter: '#828282',
          inner: '#fac800'
        }}
      />
    </div>
  );
};

Props

Icon components accept all props that you can pass to a normal SVG element, including inline style objects, onClick handlers, and more. The main way of styling them will usually be with the following props:

alt?: string – Add accessible alt text to an icon.
color?: string – Icon stroke/fill color. Can be any CSS color string, including hex, rgb, rgba, hsl, hsla, named colors, or the special currentColor variable.
customColors?: object – Icon stroke/fill color. Just like the color property used any CSS color string, but in the case of customColors you can separately customize the external and internal lines and also the filling if you want.
size?: number | string – Icon height & width. As with standard React elements, can be a number, or a string with units in px, %, em, rem, pt, cm, mm, in.
weight?: "thin" | "light" | "regular" | "bold" | "fill" | "outline" | "custom" – Icon weight/style. Can also be used, for example, to "check" the state of an icon: a Bookmark component with weight="regular" is unchecked and weight="fill" is checked..
inverted?: boolean – Inverts black to white, this property is active for all types of weights when color has been set.

CSS

All types of CSS writing are supported, classNames, inline styles and CSS utility class names, for example utility classes coming from the Tailwind CSS framework:

import { Bookmark, BookmarkAdd, BookmarkBlocked } from "uicons-react";

export function Component(){
  return (
    <div>
      <Bookmark style={{ color: '#fac800' }} />
      <BookmarkAdd className="text-green-500" weight="outline" size={32} /> // Tailwind utility class
      <BookmarkBlocked className="classic-element-class" weight="fill" size={32} />
    </div>
  );
};

Context

Uicons takes advantage of React Context API to make applying a default style to all icons simple. Create an IconContext.Provider at the root of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons:

IMPORTANT: Requires React 16.3 or higher.

import { IconContext, Bookmark, BookmarkAdd, BookmarkBlocked, ArchiveBox } from "uicons-react";

const App = () => {
  return (
    <IconContext.Provider
      value={{
        size: 32,
        customColors: { outter: 'cyan', inner: 'grey' },
        weight: 'custom',
      }}
    >
      {/* all chosen characteristics are applied to all icons involved by the context provider */}
      <div>
        <Bookmark />
        <BookmarkAdd />
        <BookmarkBlocked />
        <ArchiveBox />
      </div>
    </IconContext.Provider>
  );
};

You may create multiple Contexts for styling icons differently in separate regions of an application; icons use the nearest Context above them to determine their style.