@stead/icons-vue

Vue components for icons in digital and software products using the Carbon Design System

Getting started

To install @stead/icons-vue in your project, you will need to run the following command using npm:

npm install -S @stead/icons-vue

If you prefer Yarn, use the following command instead:

yarn add @stead/icons-vue

Usage

Icons in this package support the following sizes: 16, 20, 24, and 32 pixels. These sizes refer to the width and height of the icon.

You can install these components from @stead/icons-vue through two ways. The first is to install them when you're initializing your Vue app. For example:

import { CarbonIconsVue } from '@stead/icons-vue';
import Bee32 from '@stead/icons-vue/es/bee/32';
import Vue from 'vue';
import App from './App.vue';

Vue.use(CarbonIconsVue, {
  components: {
    Bee32,
  },
});

new Vue({
  render: h => h(App),
}).$mount('#app');

Note: if you would like to find the import path for an icon, you can reference our icon preview

Using CarbonIconsVue we can pass in any of the icon components that we'd like to use. In our application, we can then use them by doing:

<template>
  <Bee32 />
</template>

If you would rather not register icons globally, you can also import them into individual components.

import Bee32 from '@stead/icons-vue/es/bee/32';

export default {
  name: 'MyComponent',
  component: {
    Bee32,
  },
};

You can pass in props to any icon component for things like accessibility labels, custom classes, event handlers, and more. For example:

<template>
  <Bee32 aria-label="Bee" class="custom-class" v-on:click="handler" />
</template>

📚 Examples

If you're looking for more examples on how to use @stead/icons-vue, we have some examples that you can check out:

• vue-cli

🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀

📝 License

Licensed under the Apache 2.0 License.