Svgbook-icons NPM

SVGBook Icons

SVGBook is an open source library with hundred of thousands SVG Icons. And absolutely free premium icons, no sign-up required. You can browse the full sets of icons at svgbook.com.

Include popular icons in your React projects easily with svgbook-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

How To Use

A perfect multi style and multi design icons library made for designers & developers.

Install

yarn add svgbook-icons

npm install --save svgbook-icons

Usage

Import the icons you need into your React project and declare them in your render method:

import React from "react";
import ReactDOM from "react-dom";
import { ArrowUp, Download, Copy } from "svgbook-icons";

const App = () => {
  return (
    <div>
      <Horse />
      <ArrowUp design="outline" color="#0080ff" size="32" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Props

Default values for the most common props are given below:

Prop	Description	Default
`color`	Set the icon color	`currentColor`
`size`	Set the width and height of the svg icon	`24`
`strokeWidth`	Set the stroke width of the icon	`2`
`style`	Add inline styles to the element	`{}`

You can also import the whole icon library like this:

import * as Icon from 'svgbook-icons';

const MyComponent = () => {
  return <Icon.ArrowUp />
};

export default MyComponent;

Context

You can also use React Context to make applying a default style to all icons. Create an IconContext.Provider at the main parent react component 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 like this:

import React from "react";
import ReactDOM from "react-dom";
import { Icons, IconProvider } from "svgbook-icons";

const App = () => {
  return (
    <IconProvider
      value={{
        design: "outline"
        color: "0080ff",
        size: 32,
      }}
    >
      <div>
        <Icons.ArrowUp />
      </div>
    </IconProvider>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));