core-logo

CoreUI Icons for Vue

Dedicated component used to implement CoreUI Icons SVG set in Vue.js.

On this page:



CIcon Vue component

Dedicated component used to implement CoreUI Icons SVG set in Vue.js.

Features

  • Can load icons in three ways:
    • stored globally in Vue root object,
    • directly passed SVG tag content,
    • source link to SVG file
  • Greatly reduce icons bundle size, when imported as single icons,
  • Full functionality of ‘svg’ html tag,
  • Clean API

For component description visit CIcon component documentation

Installation

If you already have installed CoreUI Vue component library plugin, then you have CIcon component already installed, otherwise install package by:

NPM

npm install @coreui/icons-vue --save

Yarn

yarn add @coreui/icons-vue

Icon importing

There are three ways of icon importing:

passing icon name by ‘name’ prop (recommended) - this way you import your needed icons once and pass them to $root object on ‘icons’ key. Example: in main.js

import { cilPencil, cilSettings } from '@coreui/icons'

new Vue({
  [...]
  icons: { cilPencil, cilSettings }
})
Later anywhere in the app:
<CIcon name="cilPencil">
<CIcon name="cilSettings">

You can pass the name of the icon both in camelCase and kebab-case

Passing icon by ‘content’ prop. Simply import the icon and pass it to the component. Example:

<template>
  <CIcon :content="$options.pencil">
</template>

<script>
import { cilPencil } from '@coreui/icons'
 export default {
   pencil: cilPencil
}
</script>

CIcon API

You can use only one of ‘name’, ‘src’, and ‘content’ prop, as they define the way icon is imported. (See the paragraph above)

Linking to svg source by ‘src’ prop. Component will be rendered as ‘img’ tag.

Name Default Type Description
name undefined String Name of the icon placed in the $root instance.
content undefined String/Array Icon SVG content.
src undefined String Link to the icon. If defined component will be rendered as ‘img’ tag.
size undefined String Size of the icon. Available sizes: ‘sm’, ‘lg’, ‘xl’, ‘custom’.
customClasses undefined String/Array/Object Use for replacing default CIcon component classes.