Digibear Icons for Angular - 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 Angular ? Check out those official alternatives :

• Digibear icons for Vue 3
• Digibear icons for React/Next JS
• Digibear icons for Flutter
• Digibear icons for Figma

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-angular @digibearapp/digibear-svg-icons

Usage

Inside app.module.ts :

1. Import from @digibearapp/digibear-icons-angular

import {
  DbIconModule,
  NgDbIconContext,
  NgDigibearIconsRegistry,
  DbIconContextProps
} from '@digibearapp/digibear-icons-angular';

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

import {
  dbPizza,
  dbPopCorn
} from '@digibearapp/digibear-svg-icons'; // Import only the icons you need

3. Register the DbIconModule

imports: [
  // ...
  DbIconModule
],

4. Make sure your AppModule class includes these lines

export class AppModule {
  // Retrieve those two services
  constructor(
    private digibearIconsRegistry: NgDigibearIconsRegistry,
    private ngDbIconContext: NgDbIconContext
  ) {
    // Register the imported icons
    this.digibearIconsRegistry.registerIcons([
      dbPizza,
      dbPopCorn
    ]);

    // Create an icon context
    const context: DbIconContextProps = {
      iconStyle: "duotone",
      color: "currentColor",
      secondaryColor: "currentColor",
      opacity: 1.0,
      secondaryOpacity: 0.16,
      flippedH: false,
      flippedV: false,
    }
    // Initialize the service with it to style the icons globally
    this.ngDbIconContext.setIconContext(context);
  }
}

5. Use the icons inside your app

<db-icon 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.

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 !

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. 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.

Donation

Digibear entirely relies on donations to provide you free high-quality digital content. When you make a donation you're helping :

1. Keep the project running
2. Provide better content
3. Expand the content library