@digibearapp/digibear-icons-react NPM

Digibear Icons for React - SVG icons.

What is this package

Digibear is a service providing free high-quality digital content. This package is a collection of thousands of icons available in 3 styles (Line, Fill and Duotone). For information about how you're allowed to use the icons check out the License section of this repository.

Alternatives

Not using React/Next JS ? Check out those official alternatives :

Getting Started

To unleash the power of Digibear icons follow these simple steps.

Prerequisites.

Make sure NPM is installed. If not, run the following command to get the latest version :

Installing NPM :

npm install npm@latest -g

Installation

Install this package and the digibear-svg-icons package from NPM :

npm install @digibearapp/digibear-icons-react @digibearapp/digibear-svg-icons

Usage

Inside App.tsx :

Import from @digibearapp/digibear-icons-react

import {
  DbIcon,
  DbIconContextProps,
  DbIconContext,
  DigibearIconsRegistry,
  DigibearIconsRegistryContext,
} from "@digibearapp/digibear-icons-react";

Import the icons you need from @digibearapp/digibear-svg-icons

import { dbPizza, dbPopCorn } from "@digibearapp/digibear-svg-icons";

Make sure you do the following inside your App method or class.

const App = () => {
  // Create a Registry
  const registry = new DigibearIconsRegistry();

  // Register the imported icons
  registry.registerIcons([dbPopCorn, dbPizza]);

  // Create an icon context
  const context: DbIconContextProps = {
    iconStyle: "duotone",
    color: "currentColor",
    secondaryColor: "currentColor",
    opacity: 1.0,
    secondaryOpacity: 0.16,
    flippedH: false,
    flippedV: false,
  };

  return (
    <DbIconContext.Provider value={context}>
      {" "}
      // Provide the context
      <DigibearIconsRegistryContext.Provider value={registry}>
        {" "}
        // Provide the registry // ...
      </DigibearIconsRegistryContext.Provider>
    </DbIconContext.Provider>
  );
};

Use the icons inside your app

<DbIcon iconName="popCorn" />

Notes :

All the icons you need should be imported in the file where you create the registry.
The iconName is the name of the imported icon without the db prefix.
You can define a global style and override it by providing another context further down the widget tree or by styling the component directly through its properties.
You can append children to the SVG icon as long as they are valid SVG children as well as providing some custom valid SVG properties through the attributes.

Appending SVG children :

<DbIcon iconName="pizza">
  <!-- Append some valid SVG children here -->
</DbIcon>

Appending SVG props as rest props :

<DbIcon iconName="pizza"
<!-- {...{restPropName: "value"}} -->
/>

To browse the icons and find the one that will fit your needs, check out the official website.

Roadmap

Plugin for Flutter
Plugin for Figma
Add more styles
- Sticker Style

See the open issues for a full list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star ! Thanks again !

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

Icons — CC BY 4.0 License
- All the icons packaged as .svg and .ts/.js files are licensed under the CC BY 4.0 license.
Code — MIT License
- The code (all non icon-files) is licensed under the MIT license

See LICENSE.txt for more information.

Contact

Téodor Todorov - Twitter : @TodorovTeodorTT

Digibear website : https://digibear.app/

With great power comes great responsibility

Please share a link to one of the official repositories (this one for example) or the project's homepage when you are telling people about Digibear icons. Digibear entirely relies on donations to provide you free high-quality digital content. If you want to donate to keep the project running, check out the Donation section.