├── .gitignore
├── LICENSE.md
├── README.md
├── package.json
└── src
    ├── components
        └── FontIcon.vue
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | node_modules/
3 | 
4 | yarn\.lock
5 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Emilio Romero
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## A simpler way to use font icons with NativeScript + Vue.js
  2 | 
  3 | [![LICENSE](https://img.shields.io/github/license/emiliogrv/nativescript-vue-fonticon.svg)](https://github.com/emiliogrv/nativescript-vue-fonticon/blob/master/LICENSE.md)
  4 | [![Contributions](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/emiliogrv/nativescript-vue-fonticon/issues)
  5 | 
  6 | ### The Problem
  7 | 
  8 | You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:
  9 | 
 10 | - CSS
 11 | 
 12 | ```css
 13 | /* app.css or styles.scss */
 14 | .fa {
 15 |   font-family: FontAwesome;
 16 | }
 17 | ```
 18 | 
 19 | - view
 20 | 
 21 | ```html
 22 | <label class="fa" text="\uf293"></label>
 23 | ```
 24 | 
 25 | This works but keeping up with unicodes is not fun.
 26 | 
 27 | ### The Solution
 28 | 
 29 | With this plugin, you can instead reference the `fonticon` by the specific classname:
 30 | 
 31 | ```html
 32 | <FontIcon name="fa-play" @tap="tapAction" />
 33 | ```
 34 | 
 35 | ## Prerequisites / Requirements
 36 | 
 37 | You will have to manually [install](https://docs.nativescript.org/ui/styling#using-fonts) the fonts you want to use.
 38 | 
 39 | ## Install
 40 | 
 41 | ```
 42 | npm install nativescript-vue-fonticon --save
 43 | or
 44 | yarn add nativescript-vue-fonticon
 45 | ```
 46 | 
 47 | ## Usage
 48 | 
 49 | [FontAwesome](https://fortawesome.github.io/Font-Awesome/) will be used in the following examples but you can use any custom font icon collection.
 50 | 
 51 | - Place font icon `.ttf` file in `app/fonts`, for example:
 52 | 
 53 | ```
 54 | fonts/FontAwesome.ttf
 55 | ```
 56 | 
 57 | - Create base class in `app.css` global file, for example:
 58 | 
 59 | ```css
 60 | /* app.css or styles.scss */
 61 | .fa {
 62 |   font-family: FontAwesome;
 63 | }
 64 | ```
 65 | 
 66 | **NOTE**: Android uses the name of the file for the font-family (In this case, `fontawesome-webfont`.ttf. iOS uses the actual name of the font; for example, as found [here](https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L8). You could rename the font filename to `FontAwesome.ttf` to use just: `font-family: FontAwesome`. You can [learn more here](http://fluentreports.com/blog/?p=176).(http://fluentreports.com/blog/?p=176).
 67 | 
 68 | - Copy css to `app` somewhere, for example:
 69 | 
 70 | ```
 71 | assets/css/font-awesome.css
 72 | ```
 73 | 
 74 | Then modify the css file to isolate just the icon fonts needed. [Watch this video to better understand](https://www.youtube.com/watch?v=qb2sk0XXQDw).
 75 | 
 76 | - Configure your fonts and setup the converter:
 77 | 
 78 | ```js
 79 | import Vue from 'nativescript-vue'
 80 | import FontIcon from 'nativescript-vue-fonticon'
 81 | 
 82 | import './styles.scss'
 83 | 
 84 | Vue.use(FontIcon, {
 85 |   componentName: 'FIcon', // <-- Optional. Will be the name for component icon.
 86 |   debug: true, // <-- Optional. Will output the css mapping to console.
 87 |   paths: {
 88 |     fa: './assets/css/font-awesome.css',
 89 |     ion: './assets/css/ionicons.css'
 90 |   }
 91 | })
 92 | 
 93 | ...
 94 | ```
 95 | 
 96 | ## API
 97 | 
 98 | ### Installing
 99 | 
100 | | Parameters      | Type      | Default    | Description                             |
101 | | --------------- | --------- | ---------- | --------------------------------------- |
102 | | `componentName` | `String`  | `FontIcon` | Name for component icon.                |
103 | | `debug`         | `Boolean` | `false`    | Show output the css mapping to console. |
104 | | `paths`         | `Object`  |            | Object of paths to css fonts.           |
105 | 
106 | ### Using
107 | 
108 | | Parameters | Type               | Default | Description                                                                     |
109 | | ---------- | ------------------ | ------- | ------------------------------------------------------------------------------- |
110 | | `name`     | `String`           |         | Name of class icon.                                                             |
111 | | `color`    | `String`           |         | Sets a solid-color value to the matched view’s foreground or can use class too. |
112 | | `size`     | `[String, Number]` | `15`    | Size icon.                                                                      |
113 | | `type`     | `String`           | `fa`    | CSS class icon to use.                                                          |
114 | | `@tap`     | `Function`         |         | Listener of tap event.                                                          |
115 | 
116 | # License
117 | 
118 | [MIT](https://github.com/emiliogrv/nativescript-vue-fonticon/blob/master/LICENSE.md)
119 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nativescript-vue-fonticon",
 3 |   "version": "1.0.3",
 4 |   "description": "A simpler way to use font icons with NativeScript + Vue.js",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/emiliogrv/nativescript-vue-fonticon.git"
12 |   },
13 |   "keywords": [
14 |     "nativescript",
15 |     "nativescript-vue",
16 |     "vue",
17 |     "vuejs",
18 |     "icon",
19 |     "fonticon"
20 |   ],
21 |   "author": {
22 |     "name": "Emilio Romero",
23 |     "email": "emilio.romero1989@gmail.com"
24 |   },
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/emiliogrv/nativescript-vue-fonticon/issues"
28 |   },
29 |   "homepage": "https://github.com/emiliogrv/nativescript-vue-fonticon#readme",
30 |   "nativescript": {
31 |     "platforms": {
32 |       "android": "4.2.0",
33 |       "ios": "4.2.0"
34 |     },
35 |     "plugin": {
36 |       "vue": "true",
37 |       "category": "Developer"
38 |     }
39 |   },
40 |   "dependencies": {
41 |     "nativescript-fonticon": "^2.0.0"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/FontIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Label
 3 |     :class="type"
 4 |     :color="color"
 5 |     :fontSize="size"
 6 |     :text="name | fonticon"
 7 |     width="${size}"
 8 |     textAlignment="center"
 9 |     @tap="$emit('tap')"
10 |   />
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: "FontIcon",
16 | 
17 |   props: {
18 |     color: {
19 |       type: String
20 |     },
21 | 
22 |     name: {
23 |       type: String,
24 |       required: true
25 |     },
26 | 
27 |     size: {
28 |       type: [String, Number],
29 |       default: 15,
30 |       validation: s => !isNaN(s)
31 |     },
32 | 
33 |     type: {
34 |       type: String,
35 |       default: "fa"
36 |     }
37 |   }
38 | };
39 | </script>
40 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { TNSFontIcon, fonticon } from 'nativescript-fonticon'
 2 | 
 3 | import FontIcon from './components/FontIcon'
 4 | 
 5 | const install = (Vue, { componentName, debug = false, paths = {} } = {}) => {
 6 |   TNSFontIcon.debug = debug
 7 |   TNSFontIcon.paths = paths
 8 |   TNSFontIcon.loadCss()
 9 | 
10 |   Vue.component(componentName || FontIcon.name, FontIcon)
11 | 
12 |   Vue.filter('fonticon', fonticon)
13 | }
14 | 
15 | export default install
16 | 


--------------------------------------------------------------------------------