{"id":19964642,"url":"https://github.com/emiliogrv/nativescript-vue-fonticon","last_synced_at":"2025-03-01T17:14:11.181Z","repository":{"id":57308884,"uuid":"162064333","full_name":"emiliogrv/nativescript-vue-fonticon","owner":"emiliogrv","description":"A simpler way to use font icons with NativeScript + Vue.js","archived":false,"fork":false,"pushed_at":"2019-04-25T17:20:08.000Z","size":8,"stargazers_count":11,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-12T08:29:47.601Z","etag":null,"topics":["font-icons","nativescript-vue"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emiliogrv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-17T02:37:30.000Z","updated_at":"2022-07-24T21:43:58.000Z","dependencies_parsed_at":"2022-09-01T06:31:55.601Z","dependency_job_id":null,"html_url":"https://github.com/emiliogrv/nativescript-vue-fonticon","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emiliogrv%2Fnativescript-vue-fonticon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emiliogrv%2Fnativescript-vue-fonticon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emiliogrv%2Fnativescript-vue-fonticon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emiliogrv%2Fnativescript-vue-fonticon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emiliogrv","download_url":"https://codeload.github.com/emiliogrv/nativescript-vue-fonticon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241396776,"owners_count":19956408,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["font-icons","nativescript-vue"],"created_at":"2024-11-13T02:24:46.085Z","updated_at":"2025-03-01T17:14:11.162Z","avatar_url":"https://github.com/emiliogrv.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"## A simpler way to use font icons with NativeScript + Vue.js\n\n[![LICENSE](https://img.shields.io/github/license/emiliogrv/nativescript-vue-fonticon.svg)](https://github.com/emiliogrv/nativescript-vue-fonticon/blob/master/LICENSE.md)\n[![Contributions](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/emiliogrv/nativescript-vue-fonticon/issues)\n\n### The Problem\n\nYou can use icon fonts with NativeScript by combining a class with a unicode reference in the view:\n\n- CSS\n\n```css\n/* app.css or styles.scss */\n.fa {\n  font-family: FontAwesome;\n}\n```\n\n- view\n\n```html\n\u003clabel class=\"fa\" text=\"\\uf293\"\u003e\u003c/label\u003e\n```\n\nThis works but keeping up with unicodes is not fun.\n\n### The Solution\n\nWith this plugin, you can instead reference the `fonticon` by the specific classname:\n\n```html\n\u003cFontIcon name=\"fa-play\" @tap=\"tapAction\" /\u003e\n```\n\n## Prerequisites / Requirements\n\nYou will have to manually [install](https://docs.nativescript.org/ui/styling#using-fonts) the fonts you want to use.\n\n## Install\n\n```\nnpm install nativescript-vue-fonticon --save\nor\nyarn add nativescript-vue-fonticon\n```\n\n## Usage\n\n[FontAwesome](https://fortawesome.github.io/Font-Awesome/) will be used in the following examples but you can use any custom font icon collection.\n\n- Place font icon `.ttf` file in `app/fonts`, for example:\n\n```\nfonts/FontAwesome.ttf\n```\n\n- Create base class in `app.css` global file, for example:\n\n```css\n/* app.css or styles.scss */\n.fa {\n  font-family: FontAwesome;\n}\n```\n\n**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).\n\n- Copy css to `app` somewhere, for example:\n\n```\nassets/css/font-awesome.css\n```\n\nThen modify the css file to isolate just the icon fonts needed. [Watch this video to better understand](https://www.youtube.com/watch?v=qb2sk0XXQDw).\n\n- Configure your fonts and setup the converter:\n\n```js\nimport Vue from 'nativescript-vue'\nimport FontIcon from 'nativescript-vue-fonticon'\n\nimport './styles.scss'\n\nVue.use(FontIcon, {\n  componentName: 'FIcon', // \u003c-- Optional. Will be the name for component icon.\n  debug: true, // \u003c-- Optional. Will output the css mapping to console.\n  paths: {\n    fa: './assets/css/font-awesome.css',\n    ion: './assets/css/ionicons.css'\n  }\n})\n\n...\n```\n\n## API\n\n### Installing\n\n| Parameters      | Type      | Default    | Description                             |\n| --------------- | --------- | ---------- | --------------------------------------- |\n| `componentName` | `String`  | `FontIcon` | Name for component icon.                |\n| `debug`         | `Boolean` | `false`    | Show output the css mapping to console. |\n| `paths`         | `Object`  |            | Object of paths to css fonts.           |\n\n### Using\n\n| Parameters | Type               | Default | Description                                                                     |\n| ---------- | ------------------ | ------- | ------------------------------------------------------------------------------- |\n| `name`     | `String`           |         | Name of class icon.                                                             |\n| `color`    | `String`           |         | Sets a solid-color value to the matched view’s foreground or can use class too. |\n| `size`     | `[String, Number]` | `15`    | Size icon.                                                                      |\n| `type`     | `String`           | `fa`    | CSS class icon to use.                                                          |\n| `@tap`     | `Function`         |         | Listener of tap event.                                                          |\n\n# License\n\n[MIT](https://github.com/emiliogrv/nativescript-vue-fonticon/blob/master/LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femiliogrv%2Fnativescript-vue-fonticon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femiliogrv%2Fnativescript-vue-fonticon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femiliogrv%2Fnativescript-vue-fonticon/lists"}