在 NativeScript + Vue.js 中使用字体图标的一种更简单的方式

问题

您可以通过在视图中使用类与 Unicode 引用结合来在 NativeScript 中使用图标字体

• CSS

/* app.css or styles.scss */
.fa {
  font-family: FontAwesome;
}

• 视图

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

这可以工作，但是跟踪 Unicode 并不是很有趣。

解决方案

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

<FontIcon name="fa-play" @tap="tapAction" />

先决条件 / 要求

您将需要手动 安装 您要使用的字体。

安装

npm install nativescript-vue-fonticon --save
or
yarn add nativescript-vue-fonticon

用法

以下示例将使用 FontAwesome，但您可以使用任何自定义字体图标集合。

• 将字体图标 .ttf 文件放置在 app/fonts 中，例如

fonts/FontAwesome.ttf

• 在 app.css 全局文件中创建基础类，例如

/* app.css or styles.scss */
.fa {
  font-family: FontAwesome;
}

注意：Android 使用文件名作为字体族名称（在本例中为 fontawesome-webfont.ttf。iOS 使用实际的字体名称；例如，如 此处 所示。您可以将字体文件名重命名为 FontAwesome.ttf 以使用： font-family: FontAwesome。您可以在 此处 了解更多。(http://fluentreports.com/blog/?p=176)。

• 将 css 复制到 app 中的某个位置，例如

assets/css/font-awesome.css

然后修改 css 文件以隔离所需的图标字体。 观看此视频以更好地了解。

• 配置字体并设置转换器

import Vue from 'nativescript-vue'
import FontIcon from 'nativescript-vue-fonticon'

import './styles.scss'

Vue.use(FontIcon, {
  componentName: 'FIcon', // <-- Optional. Will be the name for component icon.
  debug: true, // <-- Optional. Will output the css mapping to console.
  paths: {
    fa: './assets/css/font-awesome.css',
    ion: './assets/css/ionicons.css'
  }
})

...

API

安装

使用

许可证

MIT