javascript - CoreUI 图标没有出现在我的 react js 应用程序中

Question

我刚开始学习 react js 并使用 coreui 免费模板。但我不知道为什么 coreui 图标没有显示。如果我的代码错误，请纠正我。
这是我首先构建我的 react js 应用程序的步骤。

我已经安装了所有节点模块，例如 @coreui/coreui、@coreui/icons-react 和 sass-loader

在App.js中导入样式(@import "~@coreui/coreui/scss/coreui";)并调用登录

这是我的代码登录(从免费 CoreUI 模板中的 master.zip 复制)

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>

结果是这样的。

我试图从 master zip <CIcon name="cil-user" /> 更改代码至 <CIcon name={'cil-user'} />来自 CoreUI 文档 CoreUI Doc但图标仍然没有出现。我错过了什么？

Answer 1

使用以下内容:

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

然后使用它:

<CIcon content={freeSet.cilUser} />