core-logo

CoreUI Icons for React.js

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

On this page:



CIcon React component

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

For component description visit CIcon component documentation

Installation

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

NPM

npm install @coreui/icons-react --save

Yarn

yarn add @coreui/icons-react

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 { CIcon } from '@coreui/icons-react';
import { cifAU } from '@coreui/icons';
Later anywhere in the app:
<CIcon name="cilPencil">
<CIcon name="cilSettings">

Icon usage

...
class CoreUIIcons extends Component {
...
render() {
    return (
      <CIcon name="cil-list" size="2xl"/>
    )
}
...

CIcon API

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

Name Type Description
className string User classes for the main HTML tag.
name string Name of the icon placed in React object.
content (string / any[]) Icon SVG code.
size (custom / custom-size / sm / lg / xl / 2xl / () / 4xl / 5xl / 6xl / 7xl / 8xl / ArrayOf(string)) Size of the icon; available sizes: ‘sm’, ‘lg’, ‘xl’, ‘custom-size’.
customClasses (string / any[] / object) Use for replacing default CIcon component classes.
src string Link to the icon. If defined component will be rendered as ‘img’ tag.
title string Title tag content.
use string Use SVG tag content.