@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

    Keywords

    none

    Install

    npm i @spmeesseman/extjs-pkg-fontawesome

    DownloadsWeekly Downloads

    0

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    2.96 MB

    Total Files

    39

    Last publish

    Collaborators

    • spmeesseman