在 NativeScript 中使用字体图标

问题

您可以通过在视图中结合一个类和一个 unicode 引用来使用 NativeScript 的图标字体

• CSS

.fa {
  font-family: FontAwesome;
}

• view

<Label class="fa" text="\uf293"></Label>

这可行，但跟踪 unicodes 并不好玩。

解决方案

使用此插件，您可以改用特定的类名来引用 fonticon

<Label class="fas" text="fa-bluetooth"></Label> 

安装

npm install @nativescript-community/fonts --save-dev

使用

在构建时启用此插件时，该插件会对您的项目执行两件处理

• 它将扫描您的代码以查找相关的字符标记，并用实际的字符替换它们。
• 它将解析您的字体文件并删除所有未使用的字符，这取决于您的特定使用情况，将大大减小字体的大小。

此处理配置在您的 webpack.config.js 中，并在构建时发生。

Font Awesome

Font Awesome 作为 npm 包分发，因此我们可以利用它将其添加到我们的项目中。

• 作为开发依赖项安装

npm i @fortawesome/fontawesome-free --save-dev

• 在全局文件 app.css/scss 中创建类，对于您想要使用的每个字体

  .fas {
  font-family: 'Font Awesome 6 Free', 'fa-solid-900';
  font-weight: 900;
  }
  
  .far {
  font-family: 'Font Awesome 6 Free', 'fa-regular-400';
  font-weight: 400;
  }
  
  .fab {
  font-family: 'Font Awesome 6 Brands', 'fa-brands-400';
  font-weight: 400;
  }

• 在文本中使用图标名称并设置字体类，例如

  <Label class="fas" text="fa-trash-can"></Label> 

• 在您的 webpack.config.js 中配置

  导入所需的函数/枚举

  const { addFontsConfigFontAwesome, FontAwesomeFontType } = require('@nativescript-community/fonts');
  

  配置您正在使用的字体

  addFontsConfigFontAwesome({ 
    fontTypes: [FontAwesomeFontType.solid, FontAwesomeFontType.brands, FontAwesomeFontType.regular], stripCharactersFromFont: true });
  

Material Design 字体

Material Design 字体 也可用作 npm 包。

• 作为开发依赖项安装

  npm i @mdi/font --save-dev

• 在全局文件 app.css/scss 中为字体创建类

  .mdi {
  font-family: 'Material Design Icons', 'materialdesignicons-webfont';
  font-weight: 400;
  }

• 在文本中使用图标名称并设置字体类，例如

  <Label class="mdi" text="trash-can"></Label> 

• 在您的 webpack.config.js 中配置

  导入所需的函数/枚举

  const { addFontsConfigMDIFont } = require('@nativescript-community/fonts');
  

  配置您正在使用的字体

   addFontsConfigMDIFont({
    stripCharactersFromFont: true,
    });  

其他字体

您还可以使用任何其他字体

以下是我们显式定义字体标记的示例 icofont。

• 下载字体并将其放置在您的项目中，例如 fonts\icofont.ttf

• 添加 CSS

  .icoFont {
      font-family: 'IcoFont', 'icofont';
      font-weight: 400;
  }

• 在您的 webpack.config.js 中配置

  导入所需的函数/枚举

  const { addFontsConfigCustom } = require('@nativescript-community/fonts');
  
  

  配置您正在使用的字体

      addFontsConfigCustom({
        pathToFont: 'fonts/icofont.ttf',
        tokenPrefix: 'icofont-',   // text text before the icon name in your source code
        tokenValues: {
        trash: 'ee09', // token name, character code
        },
        stripCharactersFromFont: true,
    });

• 使用字体

    <Label text="icofont-trash" class="icoFont"/>

以下是我们不使用图标但希望优化字体大小的示例，Google Monoton。

• 下载字体并将其放置在您的项目中，例如 fonts\Monoton-Regular.ttf

• 添加 CSS

  .monoton {
  font-family: 'Monoton', 'Monoton-Regular';
  font-weight: 400;
  }

• 在您的 webpack.config.js 中配置

  导入所需的函数/枚举

  const { addFontsConfigCustom } = require('@nativescript-community/fonts');
  
  

  配置您正在使用的字体

    addFontsConfigCustom({ pathToFont: 'fonts/Monoton-Regular.ttf', extraCharacters: 'trash-can', stripCharactersFromFont: true });

  我们不使用此字体作为图标，因此我们只想优化字体，并传递我们使用此字体的少数字符。

• 使用字体

  <Label text="trash-can" class="monoton"/>

以下是在 scss 文件中定义字体标记的示例，dripicons。

• 下载字体并将其放置在您的项目中，例如 fonts\dripicons-v2.ttf

• 添加 scss 文件，例如 fonts\dripicons.scss，内容如下

  $trash-can: \e053;

• 添加 CSS

  .drip {
  font-family: 'dripicons-v2', 'dripicons-v2';
  font-weight: 400;
  }

• 在您的 webpack.config.js 中配置

  导入所需的函数/枚举

  const { addFontsConfigCustom } = require('@nativescript-community/fonts');
  
  

  配置您正在使用的字体

  
    addFontsConfigCustom({ 
        pathToFont: 'fonts/dripicons-v2.ttf', 
        tokenPrefix: 'drip-', 
        tokenScss: 'fonts/dripicons.scss', 
        stripCharactersFromFont: true }
    );
  

• 使用字体

      <Label text="drip-trash-can" class="drip"/>
  

icomoon

这也是一个示例，其中字体的标记定义在 scss 文件中，IcoMoon。

• 生成并下载您的包，确保生成 sass。

• 将字体和 variables.scss 放置在您的项目中，例如在 fonts\icomoon 目录中。

• 添加 CSS

  .icon {
    font-family: 'icomoon', 'iconmoon';
    font-weight: 400;
  }

• 在您的 webpack.config.js 中配置

  导入所需的函数/枚举

  const { addFontsConfigCustom } = require('@nativescript-community/fonts');
  
  

  配置您正在使用的字体

  
    addFontsConfigCustom({ pathToFont: 'fonts/icomoon/icomoon.ttf', 
      tokenPrefix: 'icon-', 
      tokenScss: 'fonts/icomoon/variables.scss', 
      tokenScssPrefix:'$icon-',
      stripCharactersFromFont: true });
  

• 使用字体

      <Label text="icon-spades" class="btn btn-primary icon"/>

完整的 webpack.config.js 示例

const webpack = require("@nativescript/webpack");
const { addFontsConfigFontAwesome, addFontsConfigMDIFont, 
	FontAwesomeFontType, addFontsConfigCustom } = require('@nativescript-community/fonts');
module.exports = (env) => {
	webpack.init(env);

	addFontsConfigFontAwesome({ 
		fontTypes: [FontAwesomeFontType.solid, 
					FontAwesomeFontType.brands, 
					FontAwesomeFontType.regular],
		 stripCharactersFromFont: true });
	  
	  addFontsConfigMDIFont({
		stripCharactersFromFont: true,
	  });
	  
	  addFontsConfigCustom({ 
		pathToFont: 'fonts/Monoton-Regular.ttf', 
		extraCharacters: 'trash-can', 
		stripCharactersFromFont: true });
	  
	  addFontsConfigCustom({
		pathToFont: 'fonts/icofont.ttf',
		tokenPrefix: 'icofont-',
		tokenValues: {
		  trash: 'ee09',
		},
		stripCharactersFromFont: true,
	  });
	  
	  addFontsConfigCustom({ 
		pathToFont: 'fonts/dripicons-v2.ttf', 
		tokenPrefix: 'drip-', 
		tokenScss: 'fonts/dripicons.scss', 
		stripCharactersFromFont: true });

    addFontsConfigCustom({ pathToFont: 'fonts/icomoon/icomoon.ttf', 
          tokenPrefix: 'icon-', 
          tokenScss: 'fonts/icomoon/variables.scss', 
          tokenScssPrefix:'$icon-',
          stripCharactersFromFont: true });

	return webpack.resolveConfig();
};

使用说明

在上面的示例中，stripCharactersFromFont 设置为 true。这确保从字体中删除了未使用的字符。

为了获得更好的开发体验，您希望在开发过程中将其设置为false，一个选项是将其设置为值env.production，在发布构建中应该为true。

鸣谢

想法来自farfromrefug的此处帖子。

许可证

MIT