@spmeesseman/extjs-pkg-fontawesome

v1.0.3

Published

4 years ago

ExtJS Font Awesome Package

0High
0Medium
0Low

spmeesseman

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme