如何在 Electron React 应用程序中使用 ionicons 7？

Question

我有一个电子应用程序（带反应），当前使用 ionons 5.2.3。在我的项目中，我发现了一个

scss

文件夹，其中包含一个子文件夹

ionicons

，其中包含一组

.scss

文件。

但是，我想升级到 ionicons 7，因为它有一些我想要的图标。

因此，我从项目中删除了离子图标（

yarn remove ionicons

），然后将其添加回来以获得最新版本（

yarn add ionicons

）。我重命名了 scss\ionicons 文件夹，然后将 node_modules\ionicons\dist\ionicons 复制到我的 scss 文件夹中。但是，新的 ionicons 文件夹没有 scss 文件，而是有 svg 文件。但出于乐观，无论如何还是重建了应用程序。结果：我的应用程序中仍然只显示旧图标。

例如，

<ion-icon name={'clipboard-sharp'} />

显示图标（在我的旧 ionicons 5.2.3 中可用），但

<ion-icon name={'chevron-collapse-sharp'} />

不显示图标（在当前版本的 ionicons 中可用）。

如何从 ionicons 7 获取图标以实际显示在我的应用程序中？

Answer 1

我已经可以使用了：

• 我删除了离子图标：

  yarn remove ionicons

• 我添加了离子图标以获得最新版本：

  yarn add ionicons

• 我添加了@ionic/react：

  yarn add @ionic/react

• 在我的

  scss

  文件夹中，我将

  ionicons

  文件夹重命名为

  ionicons-5.2.3

在我的图标组件中：

• import * as IonIcons from 'ionicons/icons';

•   const icon = IonIcons[children];
  
    if (!icon) {
      // use the old ionicons 5.2.3
      return <IonIcon style={style} name={children} />;
    }
    // use the new ionicons
    return <IonIcon style={style} icon={icon} />;
  
  

请注意，对于离子 5，请使用连字符：

<Icon>volume-high-outline</Icon>

。

对于 ionicons 7，使用驼峰命名法：

<Icon>removeSharp</Icon>