ExtJs Package Open Tooling Package Wrapper for Font Awesome


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

* Please report any bugs, suggestions or documentation requests via the
Issues
* Feel free to submit
pull requests
* Contributors

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|