# Icon

Component used to implement CoreUI svg icons and other SVG/JS icons.

# Features

Can load icons stored globally, directly passed or by source link,
Can significantly reduce bundle size due to JavaScript named icons import,
Full functionality of svg html tag,
Clean API

# Available icons

Available 1500+ free icons are presented here. They are available both in sets ('freeSet', 'brandSet', 'flagSet') and as individual icons (imported according to icon name). There is also the extended PRO icons package with more icons and styles (duotone, solid sets).

You can also use your own SVG/JS icons or SVG icons from other packages.

# 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

//individual icons (optimal bundle size)
import { cilPencil, cilSettings } from '@coreui/icons'

new Vue({
  [...]
  icons: { cilPencil, cilSettings }
})

//importing whole set
import { freeSet } from '@coreui/icons'

new Vue({
  [...]
  icons: { freeSet }
})

Later anywhere in the app:

  <CIcon name="cil-pencil">
  <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>

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

# 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)

Besides props, you can use SVG element attributes like height, width, viewBox, class, style

# Converting SVG icons to JS

You can convert your existing SVG icon i.e. logo to JavaScript format, making it possible to be globally registered, so you can access your icon by name anywhere in the APP and modify its styling easily.

Example which renders icon without viewBox:

<svg width="400" height="110" viewBox="0 0 10 10">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
</svg>

export const rectangle = ['<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>']

Example with default viewBox (viewBox attribute can be overriden in CIcon definition)

<svg width="400" height="110" viewBox="0 0 10 10">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
</svg>

export const rectangle = ['10 10', '<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>']