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>

4. The result like this.

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?

Answer

Use the following:

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

Then use it:

<CIcon content={freeSet.cilUser} />