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?

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

  1. Do you have a spam problem on this blog; I also am a
    blogger, and I was wanting to know your situation; many of us have developed some nice procedures and we are looking to swap methods with
    others, be sure to shoot me an email if interested.

    Reply
  2. This design is steller! You certainly know how to keep
    a reader entertained. Between your wit and your videos, I was almost moved
    to start my own blog (well, almost…HaHa!) Excellent job.
    I really loved what you had to say, and more than that, how you presented it.
    Too cool! cheap flights http://1704milesapart.tumblr.com/ cheap
    flights

    Reply

Leave a Comment