Vue Icon Component
Official Vue.js component for CoreUI Icons and CoreUI Icons PRO.
Installation
If you want to use our icon component and our icons library you have to install two additional packages.
Npm
// CoreUI Icons library
npm install @coreui/icons
// CIcon component
npm install @coreui/icons-vue
Yarn
yarn add @coreui/icons
yarn add @coreui/icons-vue
Usage
Single icon
<template>
<CIcon :icon="cilList" size="xl"/>
<CIcon :icon="cilShieldAlt" size="xl"/>
</template>
<script>
import { CIcon } from '@coreui/icons-vue';
import { cilList, cilShieldAlt } from '@coreui/icons';
export default {
components: {
CIcon
},
setup() {
return {
cilList,
cilShieldAlt,
}
}
}
</script>
All icons
<template>
<CIcon :icon="icon.cilList" size="xxl"/>
</template>
<script>
import { CIcon } from '@coreui/icons-vue';
import * as icon from '@coreui/icons';
export default {
components: {
CIcon
},
setup() {
return {
icon,
}
}
}
</script>
Icons object
This way you import your needed icons once and pass them to $root object on 'icons' key
// main.js / main.ts
import { CIcon } from '@coreui/icons-vue';
import {
cilArrowBottom,
cilArrowRight,
cilArrowTop,
cilBan,
cilBasket,
cilBell,
cilCalculator,
cilCalendar
} from '@coreui/icons'
const icons = {
cilArrowBottom,
cilArrowRight,
cilArrowTop,
cilBan,
cilBasket,
cilBell,
cilCalculator,
cilCalendar
}
const app = createApp(App)
...
app.provide('icons', icons)
app.component('CIcon', CIcon)
...
app.mount('#app')
Later anywhere in the app:
<CIcon icon="cilArrowBottom" size="xxl"/>
<CIcon icon="cil-arrow-bottom" size="xxl"/>
You can pass the name of the icon both in camelCase and kebab-case
Available icons
CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app.
API
CIcon
import { CIcon } from '@coreui/icons-vue'
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
content | Use :icon="..." instead of@deprecated since version 3.0 | string|array | - | - |
custom-class-name | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. | string|array|object | - | - |
icon | Name of the icon placed in Vue object or SVG content. | string | string[] | - | - |
name | Use icon="..." instead of@deprecated since version 3.0 | string | - | - |
size | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | string | - | - |
title | Title tag content. | string | - | - |
use | If defined component will be rendered using 'use' tag. | string | - | - |