@digibearapp/digibear-icons-vue

Digibear Icons for Vue 3 - SVG icons.

Digibear icons for Vue 3

A free high-quality icon library for your Vue 3 apps.
Explore the icons »

Report Bug · Request Feature

Table of Contents

1. What is this package
   • Alternatives
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. With great power comes great responsibility
9. Donation

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.

(back to top)

Alternatives

Not using Vue 3 ? Check out those official alternatives :

• Digibear icons for React.js/Next JS
• Digibear icons for Angular
• Digibear icons for Flutter
• Digibear icons for Figma

(back to top)

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

(back to top)

Usage

Inside App.vue :

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

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

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

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

3. Make sure you do the following inside your <script lang="ts"></script> tags.

// Create a Registry
const registry: DigibearIconsRegistry = 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,
};

export default defineComponent({
  name: "App",
  provide: {
    DigibearIconsRegistry: registry, // Provide the registry
    DbIconContext: context, // Provide the context
  },
  components: {
    HelloWorld,
    // DbIcon
    // Add the previous line to any component that need to use an icon
  },
});

4. 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 $attr :

<DbIcon iconName="pizza" <!-- attributeName="value" --> /></DbIcon>

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

(back to top)

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).

(back to top)

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

(back to top)

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.

(back to top)

Contact

Téodor Todorov - Twitter : @TodorovTeodorTT

Digibear website : https://digibear.app/

(back to top)

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.

(back to top)

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

(back to top)