1

我是 Ionic React 的新手，我正在寻找将自定义字体和自定义图标集集成到我的项目中的正确方法，以便它可以按预期在所有平台上运行。

自定义图标集 我的目标是让我的自定义图标与 IonIcon 一起使用，以便我可以使用默认样式选项，如“大小”和 CSS 变量（例如…g --ioinc-stroke-weight）。

到目前为止我做了什么：

  1. 我将图标集（所有图标都是 svg）添加到“public/assets/customicons/”中</li>
  2. 我在需要的地方将 IonIcon 导入到我的组件中
  3. 集成（例如）

到目前为止，图标按预期显示，自定义属性“大小”正在工作。但是，我无法以编程方式设置图标颜色或笔划宽度。所有图标都设置了默认属性（例如 < g fill=“none” fill-rule=“evenodd” stroke="#092A5E" stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“8 ” >）。即使我删除了这些默认属性，我也无法通过 CSS 变量设置它们

问题 1：“public/assets/customicons/”是存储图标的正确文件夹吗？ 问题 2：如何通过 CSS 更改图标的颜色？

自定义字体

目标：我希望自定义字体显示在所有平台上

到目前为止我做了什么：

  1. 在“src/assets/fonts/”中添加了自定义字体</li>
  2. 在“src/theme/”中创建了一个“fonts.css”，我通过“@font-face”整合了字体</li> 
   @font-face {
     font-family: ‘FONTNAME’;
     src: url(’…/assets/fonts/FONTNAME.ttf’);
     font-style: normal;
     font-weight: 400;
     font-display: swap;
   }
  1. 将字体分配给不同的元素

问题 1：这是存储自定义字体的正确文件夹吗？（当自定义字体像图标集一样保存在“public/assets/fonts/”下时，我无法这样做）

不幸的是，我找不到关于这些主题的任何文档、教程或帖子。

谢谢你的帮助！

4

0 回答 0