亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

CoreUI 圖標沒有出現在我的反應 js 應用程序中

CoreUI 圖標沒有出現在我的反應 js 應用程序中

蕭十郎 2022-11-11 10:58:45
我剛開始學習 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>
查看完整描述

3 回答

?
www說

TA貢獻1775條經驗 獲得超8個贊

要通過 prop 全局使用圖標,name您需要創建React.icons對象:

React.icons = {...freeSet }


查看完整回答
反對 回復 2022-11-11
?
qq_笑_17

TA貢獻1818條經驗 獲得超7個贊

默認情況下,并非所有免費圖標都是導入的。您需要將希望使用的圖標添加到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" />


查看完整回答
反對 回復 2022-11-11
?
繁花如伊

TA貢獻2012條經驗 獲得超12個贊

使用以下內容:

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

然后使用它:

<CIcon content={freeSet.cilUser} />



查看完整回答
反對 回復 2022-11-11
  • 3 回答
  • 0 關注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號