反应导入 CoreUI 图标 - JavaScript

一种通过 JavaScript 在 React 应用程序中导入 CoreUI 图标的方法是使用 @coreui/icons-react npm 包。

安装

使用以下命令可以安装 @coreui/icons-react：

npm install @coreui/icons-react --save

引入

在组件中您可以通过以下方式引入 CoreUI 图标：

import CIcon from '@coreui/icons-react';

使用

要使用 CoreUI 图标，请按如下方式添加组件：

<CIcon name="cil-star" />

在上面的例子中，name 属性是指要使用的图标的名称。您可以在这里找到所有的 CoreUI 图标。

可选属性

以下是 CIcon 组件的可选属性：

| 属性 | 值类型 | 默认值 | 描述 | | --------- | ------ | ------ | ---------------------------------------------- | | name | string | - | 要使用的图标的名称 | | customClassName | string | - | 自定义类名 | | content | string | - | 在 svg 元素中间添加内容，一般用于添加 badge | | height | string | - | 图标高度 | | width | string | - | 图标宽度 | | viewBox | string | - | viewBox 属性如类的常规 svg 图标 | | title | string | - | 提供的标签不会显示在 DOM 中，但用于辅助技术 | | role | string | - | 用于无障碍访问 | | focusable | string | - | 用于无障碍访问 |

示例

以下是一个基本的使用 CoreUI 图标的示例：

import React from 'react';
import CIcon from '@coreui/icons-react';

const MyComponent = () => (
  <div>
    <CIcon name="cil-star" customClassName="text-warning"/>
  </div>
);

export default MyComponent;

In the above example, the cil-star icon will be displayed in a div with a text-warning color.

结论

借助 @coreui/icons-react，您可以轻松地在 React 应用程序中导入 CoreUI 图标。 直接在您的组件中使用<CIcon>来使用CoreUI图标。 该组件有一些属性可以使用，包括 name、customClassName、width 等。

使用CoreUI图标可以帮助提升您的UI设计。 所以，从现在开始在您的React应用程序中使用CoreUI图标吧！

参考链接

• CoreUI Icons
• CoreUI Icons React