CoreUI Icon doesn't appear in my react js app

i just started learning react js and using coreui free templates. But i don’t know why the coreui icons not showing. Please correct me if my code is wrong.

This is my step to build first my react js app.

  1. I’ve already install all node module like @coreui/coreui, @coreui/icons-react, and sass-loader
  2. Import style (@import "~@coreui/coreui/scss/coreui";) in App.js and call login
  3. And this is my code Login (Copy from master.zip from Free CoreUI template)
import React from 'react'

import {
  CButton,
  CCard,
  CCardBody,
  CCardGroup,
  CCol,
  CContainer,
  CForm,
  CInput,
  CInputGroup,
  CInputGroupPrepend,
  CInputGroupText,
  CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'

const Login = () => {
  return (
    <div className="c-app c-default-layout flex-row align-items-center">
      <CContainer>
        <CRow className="justify-content-center">
          <CCol md="6">
            <CCardGroup>
              <CCard className="p-4">
                <CCardBody>
                  <CForm>
                    <h1>Login</h1>
                    <p className="text-muted">Sign In to your account</p>
                    <CInputGroup className="mb-3">
                      <CInputGroupPrepend>
                        <CInputGroupText>
                          <CIcon name={'cil-user'} />
                        </CInputGroupText>
                      </CInputGroupPrepend>
                      <CInput type="text" placeholder="Username" autoComplete="username" />
                    </CInputGroup>
                    <CInputGroup className="mb-4">
                      <CInputGroupPrepend>
                        <CInputGroupText>
                          <CIcon name="cil-lock-locked" />
                        </CInputGroupText>
                      </CInputGroupPrepend>
                      <CInput type="password" placeholder="Password" autoComplete="current-password" />
                    </CInputGroup>
                    <CRow>
                      <CCol xs="6">
                        <CButton color="primary" className="px-4">Login</CButton>
                      </CCol>
                      <CCol xs="6" className="text-right">
                        <CButton color="link" className="px-0">Forgot password?</CButton>
                      </CCol>
                    </CRow>
                  </CForm>
                </CCardBody>
              </CCard>
            </CCardGroup>
          </CCol>
        </CRow>
      </CContainer>
    </div>
  )
}

export default Login;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  1. The result like this.
    Result

I tried to change the code from master zip <CIcon name="cil-user" /> to <CIcon name={'cil-user'} /> from CoreUI Doc CoreUI Doc but the icon still doesnt appear. Did i miss something?

6 thoughts on “CoreUI Icon doesn't appear in my react js app”

  1. Use the following:

    import CIcon from '@coreui/icons-react'
    import { freeSet } from '@coreui/icons'
    

    Then use it:

    <CIcon content={freeSet.cilUser} />
    
    Reply
  2. Not all of the free icons are imported by default. You will need to add the icons you wish to use to the src/assets/icons/index.js file.

    import {
        ...
        cilUser,
        ...
    } from '@coreui/icons'
    
    export const icons = Object.assign({}, {
        ...
        cilUser,
        ...
    })
    

    React.icons is set globally in src/index.js which uses the exported icons from src/assets/icons/index.js

    import { icons } from './assets/icons'
    ...
    React.icons = icons
    

    After importing the icons you wish to use, you can use the icon by name:

    <CIcon name="cil-user" />
    
    Reply

Leave a Comment