@spmeesseman/extjs-pkg-fontawesome

1.0.3 • Public • Published

ExtJs Package Open Tooling Package Wrapper for Font Awesome

semantic-release Build Status Known Vulnerabilities Average time to resolve an issue Percentage of issues still open

Description

This package provides an ExtJS package wrapper for the Font Awesome icon set. The build is set to use the pro version, you must be a paid customer. If pro version cannot be downloaded, then the free version is used when built.

Install

To install this package, run the following command:

npm install extjs-pkg-fontawesome

Usage

To include the package in an ExtJS application build, be sure to add the package name to the list of required packages in the app.json file:

"requires": [
     "fontawesome",
    ...
]

For an open tooling build, also add the node_modules path to the workspace.json packages path array:

 "packages": {
    "dir": "...${package.dir}/node_modules/extjs-pkg-fontawesome"
}

Simply use the icons with the default ExtJS syntax:

items: [
{
    xtype: 'panel',
    iconCls: 'far fa-plus'
}]

Feedback & Contributing

Build Notes (old / need to edit)

To use package with ExtJS, some finagling of both some framework files and the original FontAwesome package was necessary.

These changes are listed below:

First, to use the external package, the following file must be edited in the ExtJS framework directory:

ext/sass/etc/font-awesome-variables.scss

Add the following line to the end of the file (needs to be the last line so that all new definitions override the legacy definitions). Note the original import of the legacy variables needs to remain so that default references embdeed within the base themes will have a valid reference:

@import "../../../packages/remote/fontawesome/sass/etc/_variables.scss";

If using the Triton classic toolkit theme, the following file needs to be modified to remove the legacy package dependency:

ext/src/classic/theme-triton/package.json

Remove the legacy "font-awesome" package from the 'requires' config, it should look like:

"requires": [
       "font-ext"
   ],

If using a modern toolkit theme, the following file should be modified to remove the legacy package dependency:

ext/src/modern/theme-neptune/package.json

Remove the legacy "font-awesome" package from the 'requires' config, it should look like:

"requires": [
       "font-ext"
   ],

The fa-content() function in _variables.sss strips the slash and needed to be changed. It previously returned 'unquote(""#{ $fa-var }"");'. It was changed to return only '$fa-var'.

UPDATE 11/16/2018 - The below commets about quoting the values in _variables.css is now handled in the build script. This no longer needs to be done manually. Skip to the lines starting with "To include the package in the build". The below comments are left for reference.

The _variables.scss file in the 5.1 Pro version also came packaged with unquoted values. This needed to be edited as well as, manually quoting all of the listd values of the property/value pairs.

For example, out of the box, values were defined like the following:

$fa-var-address-card: \f2bb;

This needed to be changed to:

$fa-var-address-card: "\f2bb";

If these values are not quoted, improper conversion in compilation occurs in the css, and the icon content gets defined without the required preceding '', like so:

content: "f2bb"

The value needs to be:

content: "\f2bb"

To include the package in the build, be sure to add the package name to the list of required packages in the application's app.json file (and removing the original "font-awesome" package):

"requires": [
    "font-awesome-5.1.0",
    ...
]

Set the value $fa-font-path in the _variables.scss file to :

../../resources/font-awesome-5.1.0/webfonts

IMPORTANT:  The "!default" tag must be removed or the orig f-font-path value
set by Ext toolkit will not get overridden

Builds by spmeesseman

Package Use Case Repository Marketplace
conventional-changelog-spm Semantic-Release GitHub Npmjs.org Registry
extjs-pkg-plyr ExtJS Open Tooling GitHub Npmjs.org Registry
extjs-pkg-fontawesome ExtJS Open Tooling GitHub Npmjs.org Registry
extjs-pkg-websocket ExtJS Open Tooling GitHub Npmjs.org Registry
extjs-pkg-webworker ExtJS Open Tooling GitHub Npmjs.org Registry
extjs-server-net ExtJS Open Tooling GitHub Npmjs.org Registry
extjs-theme-graphite-small ExtJS Open Tooling GitHub Npmjs.org Registry
extjs-theme-amethyst ExtJS Open Tooling GitHub Npmjs.org Registry
svn-scm-ext Visual Studio Code GitHub Visual Studio Marketplace
vscode-taskexplorer Visual Studio Code GitHub Visual Studio Marketplace
vscode-vslauncher Visual Studio Code GitHub Visual Studio Marketplace

Dependents (0)

Package Sidebar

Install

npm i @spmeesseman/extjs-pkg-fontawesome

Weekly Downloads

0

Version

1.0.3

License

MIT

Unpacked Size

2.96 MB

Total Files

39

Last publish

Collaborators

  • spmeesseman