在 NativeScript + Vue.js 中使用字体图标的简单方法

问题

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

• CSS

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

• 视图

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

这很有效，但是跟踪 unicodes 不是一件有趣的事情。

解决方案

使用此插件，您可以通过特定的类名来引用 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