@carbon/icons-vue

@carbon/icons-vue

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

Getting Started

Run the following command using npm:

npm install -S @carbon/icons-vue

If you prefer Yarn, use the following command instead:

yarn add @carbon/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 @carbon/icons-vue through two ways. The first is to install them when you're initializing your Vue app. For example:

import { CarbonIconsVue, Bee32 } from '@carbon/icons-vue';
import Vue from 'vue';
import App from './App.vue';

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

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

Using CarbonComponentsVue 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 '@carbon/icons-vue';

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>

🤲 Contributing

Looking to contribute? You should start here!