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

Question

我刚开始学习 react js 并使用 coreui 免费模板。但我不知道为什么 coreui 图标没有显示。如果我的代码错误，请纠正我。

这是我首先构建我的 react js 应用程序的步骤。

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

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

3. 这是我的代码登录（从免费 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>

Answer 1

要通过 prop 全局使用图标，name您需要创建React.icons对象：React.icons&nbsp;=&nbsp;{...freeSet&nbsp;}

Answer 2

默认情况下，并非所有免费图标都是导入的。您需要将希望使用的图标添加到src/assets/icons/index.js文件中。import {&nbsp; &nbsp; ...&nbsp; &nbsp; cilUser,&nbsp; &nbsp; ...} from '@coreui/icons'export const icons = Object.assign({}, {&nbsp; &nbsp; ...&nbsp; &nbsp; cilUser,&nbsp; &nbsp; ...})React.icons在src/index.js中全局设置，它使用从src/assets/icons/index.js导出的图标import { icons } from './assets/icons'...React.icons = icons导入要使用的图标后，可以按名称使用图标：<CIcon name="cil-user" />

Answer 3

使用以下内容：import&nbsp;CIcon&nbsp;from&nbsp;'@coreui/icons-react' import&nbsp;{&nbsp;freeSet&nbsp;}&nbsp;from&nbsp;'@coreui/icons'然后使用它：<CIcon&nbsp;content={freeSet.cilUser}&nbsp;/>