问题标签 [ionicons]

我在使用我的应用程序显示图标时遇到问题。无论我导入什么图标，例如：来自 React native base、@expo/vector-icons、react-native-vector-icons/Ionicons ...等。

它只会显示 (X) 或 ?

我尝试了很多方法，包括 react-native 链接，使用来自 React-Native 的默认导入图标。这一切都行不通。

参考：

1) https://ionicons.com/cheatsheet.html

2) https://www.npmjs.com/package/react-native-ionicons

我将在此处附上我的代码和屏幕截图，希望它有助于解决我的问题。谢谢你。

图标样式

目前在我的应用程序中显示的唯一图标是 Navigator Back Button。

编辑1：安装@expo/vector-icons 9.0.0

编辑 2：更新到 Expo v32

包.json

应用程序.json

新错误。undefined 不是我的 ConfigApp.js 上的对象（评估“_expo.default.Constant”）

配置应用程序.js

编辑 3：无法从“application\navigations\Logged.js”解析“@expo/vector-icons”

编辑 4：图标仍然无法正确显示

我正在尝试react-native-vector-icons在我的项目中包含一些图标。通常，我将图标与输入对齐，因此我希望它具有相同的高度（或至少更小），这样我就可以将其居中在 flex 行中的输入前面，而不会增加行的大小。但是，如果我将它们的大小设置为输入的字体大小，图标就会变得太小。如果我增加图标的大小，这会拉伸我的弹性框，但这显然是不必要的，因为图标在顶部和底部有很多空白。这是一个示例屏幕截图：

有没有办法修剪这个？图标应该是方形的。这是我目前在该屏幕上的代码：

我在错误之后一直遇到错误，以至于我重置了 Metro Bundle 并执行了更新，从所需的模块“699”到“700”的错误已经出现，现在这个。我相信我拥有 Drawer navigator 和 ionicicons 所需的所有依赖项，但错误仍然存​​在。我在不同的文件中编写了代码，但下面是用 App.js 编写的。随意询问其他人以解决手头的问题。

我在我的解决方案中使用了 svg 图标作为自定义离子项目，如下所示。它适用于 web 视图但在模拟器或设备上运行良好，如下所示。

左侧是模拟器，右侧是网页视图

我的实现

角.json

HTML

SVG

我已经放置了ios-decrease.svg和md-decrease.svg文件src/assets/icon/ion-icons夹。

正如标题所述，我在 assets -> fonts 文件夹中有 ionicons 和 pe 字体。

在我的 application.rb 文件中

所有图标都可以在桌面上使用，即我的字体文件夹中的 pe 和 ionicons 以及 gem 'font-awesome-rails' 中的字体

在我的桌面上通过谷歌浏览器看到的网站

但是，在移动设备上，所有字体都被视为一个空白框，向我提示 404 错误，但我不明白无论是从台式机还是移动设备加载都会有什么不同。

在我的 iPhone 上通过 Google Chrome 浏览的网站

我想为离子复选框（离子复选框）使用我自己的图标。我设法通过更改我的 html 表中没有的 div 的类来在控制台中做到这一点。

我的代码：

控制台中的代码：

如果我在控制台中通过 div class="my-custom-icon" 更改 div class="checkbox-inner"，这很好，但我不知道该怎么做，因为我看不到这个 div ..

请帮助我，如果你有任何想法..

我正在尝试使用 react-navigation 设置一个简单的屏幕导航栏。我的导航工作正常，但无法在每个选项卡上显示任何图标。

我尝试使用 FontAwesome 而不是 IonicIcons，但是带有 X 的同一个 Box 代替了所需的图标。

当我在标签式离子应用程序中使用任何开箱即用的 Ionicons 或其他定制的 SVG 图标时，它们都可以正常工作，即

• 当标签被停用时，他们被弄清楚了
• 激活标签时，它们获得了主颜色

如果我使用 Inkscape 创建自己的黑白 SVG 图标，结果是图标不会改变其颜色。

• 选项卡图标始终具有原始颜色（黑色）只有标题相应地更改颜色

我最好的猜测是，首先使用 Inkscape 创建合适的图标时，我做错了事。

我做了什么来研究我的问题？

1. 首先，我从网上获取了一个免费的 SVG 图标，并在我的选项卡式 ionic 应用程序中将其用作自定义图标。这完全符合预期！我使用了 GraphBerry 的这个漂亮的飞机形状：

   • https://www.flaticon.com/free-icon/airplane-shape_59919

2. 然后我将相同的 SVG 加载到 Inkscape 中，并将其存储为“Inkscape SVG”。由于 Inkscape 添加了所有其他内容，文件大小略大。它仍然可以完美运行。

3. 然后我在飞机形状上添加了一个简单的圆圈，并将其再次存储为 Inkscape SVG。将生成的 SVG 加载为自定义图标仍然可以完美运行！

4. 接下来，我从头开始创建一个新图标，并添加了 6 个具有默认 Inkscape 颜色的不相交的圆圈。它被存储为 Inkscape SVG 并且运行顺畅！

5. 现在麻烦开始了！我又开始了一个新的图标，现在我有两个相交的圆圈，一个是黑色的，另一个是灰色的。我用灰色的通过“差异”操作“切断”了黑色圆圈的一部分。结果是一种只有黑色的“新月”。保存为 Inkscape SVG 并在我的应用程序中用作自定义图标。它保持黑色，并且只有黑色。没有变灰，没有焦点颜色，什么都没有。只有选项卡的标题会相应地调整颜色。

   • 我绝对确定该图标是一种单一颜色的图标：黑色。
   • 我尝试了“对象到路径”功能和其他不同的措施，但没有帮助

我不确定我的 SVG 文件有什么问题，但我怀疑仅将 SVG 设为单色以使其成为有用的图标还不够？

这样的离子/打字稿代码可能没有任何问题，因为自定义图标通常对我有用。但是如果你想用我错误的 SVG 尝试一个简单的 Ionic 4 示例，试试这个：

创建具有 3 个选项卡的标准选项卡式离子应用程序：

现在将 SVG 文件复制到“/assets/icon/”目录。

之后，在文件“/app/tabs/tabs.page.html”中添加自定义图标。

• Tab One 有一个开箱即用的 Ionicons 图标
• 标签二使用上面提到的飞机图标
• 选项卡三引用了非工作自制图标

在这张图片中，您可以看到所有三个选项卡一个接一个地被选中，第三个图标没有改变它的颜色：

• 图片：错误的图标行为

这是名为“custom-shape-cut-circle.svg”的第三个图标的无效 svg/xml 代码：

第三个图标的预期行为应该与第二个图标类似，在停用选项卡上时它应该是灰色的，在激活的选项卡上时应该是蓝色的。

诀窍是什么？

更新：

在@Moini 和@jt-houtenbos 的出色回答下，我终于明白了我的自定义文件的问题。

样式是问题，现在我知道了原因，我终于明白了 Inkscape 填充/描边选项“绘制未定义”。选中此选项（而不是使用任何颜色设置填充/描边），自定义图标可以完美运行！

这是找到该选项的地方： 图片：Inkscape 选项“paint undefined”

在我在答案中获得信息之后，我建议仅在起草时使用此选项。它使您的开发更容易，因为您不需要每次都手动编辑 SVG。

在为生产创建自定义 SVG 时，我强烈建议使用@jt-houtenbos 描述的过程。生成的文件大小要小得多，而且图标仍然可以正常工作！

在我的 ionic 项目中，在进行离子服务时会加载离子。但是在进行浏览器构建（ionic build --prod）时，svg 文件会被下载，但不会附加到组件中。

当给出离子服务时，这个显示图标的屏幕截图被加载到浏览器中。

此屏幕截图显示没有图标的应用程序。您可以在网络选项卡中看到 svg 已下载，但在屏幕中不可见。（离子构建--prod）。

在此处输入图像描述

我刚开始使用 React Native 0.57.1​​ 和 expo 2.21.2使用样板代码，该代码尝试在启动期间使用命令npm start或加载字体expo start：

这给出了一个错误

无法从“src/boot/setup.js”解析“@expo/vector-icons/fonts/Ionicons.ttf”

尝试#1 npm install --save @expo/vector-icons：。但是，这样做并不能解决错误。

为什么会发生这种情况，我们如何解决这个问题？谢谢！

更新：根据 mialnika 和 Carlos Abraham 的建议，错误已修复，但遇到了新错误：

Expo SDK 需要 Expo 才能运行。似乎本机 Expo 模块不可用，并且此代码未在 Expo 上运行。

这是在 Expo 的开发模式下运行 RN 应用程序，通过 LAN 连接，使用实际 iPhone 上的 iOS Expo 客户端。

expo init新项目没有出现此类错误