@carbon/icons-vue
Vue components for icons in digital and software products using the Carbon Design System
Getting started
To install @carbon/icons-vue in your project, you will need to 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 } from '@carbon/icons-vue';
import Bee32 from '@carbon/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 '@carbon/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 @carbon/icons-vue, we have
some examples that you can check out:
🙌 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.
IBM Telemetry
This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.