CoreUI 图标没有出现在我的反应 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>

Answer 1

要通过 prop 全局使用图标，name您需要创建React.icons对象：

React.icons = {...freeSet }

Answer 2

默认情况下，并非所有免费图标都是导入的。您需要将希望使用的图标添加到src/assets/icons/index.js文件中。

import {

    ...

    cilUser,

    ...

} from '@coreui/icons'

export const icons = Object.assign({}, {

    ...

    cilUser,

    ...

})

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 CIcon from '@coreui/icons-react'
import { freeSet } from '@coreui/icons'

然后使用它：

<CIcon content={freeSet.cilUser} />