Pro icon packs

[arjendejong12]

Hey there!

Is it or will it be possible to use pro packs (specifically Font Awesome)?
I've got a pro license so I would like to use all available icons.

Thanks!

[cyberalien]

It is currently not possible because of license. Icons are served from public API, there is no way to check who has and who doesn't have FontAwesome Pro license, so only free icon sets are available.

Iconify API is where all visitors get icons from. Iconify script checks page to see what icons are there, then connects to API to retrieve those icons, then renders icons.

There is option of hosting your own Iconify API. I wrote a tutorial here: https://iconify.design/docs/api-hosting/
Tutorial might be a bit messy, rewriting whole documentation section is in todo list, but it is not hard to set up. API hosting script is available in Node.js and PHP. PHP is very easy to use.

So you can use that to host FontAwesome Pro icons. If you are interested in using custom API to host FontAwesome Pro icons, I can help. It requires writing short script to convert FontAwesome Pro icons to Iconify JSON format.

Using Iconify with FontAwesome Pro is also part of my todo list for new documentation.

[arjendejong12]

Thanks for the quick answer! I'll take a look at the documentation and try to set it up first, before loading pro icons.

[Jaspervv]

If you host your own API that has access to the Pro icons, wouldn't it allow any other sites to use your API as well to access them?
There's no real way to differentiate between an user of your own site, and an user of another.

Unless maybe you do something like making your site pass a key to the client and API. The API can then whitelist this key and the client can pass the key to the API to get access.

[cyberalien]

Yes, it would allow anyone to access icons. But its not any different from hosting FA Pro font files on your server.

All other person needs to see is source code of page. For Iconify it is to get your custom Iconify API link, for font its to get link to css file. So its the same.

[Jaspervv]

That's a good point, didn't think of that. 😅
Great work on the project, looking forward on trying it out

[cyberalien]

Thanks.

[arjendejong12]

@cyberalien I've set up a local PHP api, imported FontAwesome Pro Light icons with prefix fal, and placed the output json fal.json in the json directory. I can't however manage to load a light icon, with the following url: http://localhost/iconify/fal-home.svg. I'm getting the 'not found' error. Default icons DO work: http://localhost/iconify/fa-home.svg. What am I missing?

[cyberalien]

My guess is something is wrong with json file. API hosting script is strict, to avoid possible errors it verifies that prefix in json file matches file name.

So make sure prefix is set in json file like this:

{
    "prefix": "fal",
    "icons": [
        ...

[arjendejong12]

This is what fal.json contains:

{
	"prefix": "fal",
	"icons": {
		"abacus": {
			"body": "...",
			"width": 576
		},
                ...
        },
	"width": 512,
	"height": 512
}

[cyberalien]

That's correct content.

PHP API caches data to serve icons faster, so next guess is cache needs to be purged. Delete all php files in directory "cache".

[cyberalien]

If something else is wrong, this is my version of script for importing FontAwesome Pro.

Create NPM project:

npm init

Create index.js:

"use strict";

const fs = require('fs');
const tools = require('@iconify/tools');

// Clone FontAwesome Pro in this directory (or unpack zip file and change srcDir to "svgs" directory in zip file):
// git clone git@github.com:FortAwesome/Font-Awesome-Pro.git
const srcDir = __dirname + '/Font-Awesome-Pro/svgs/';

const sources = {
    fab: srcDir + '/brands',
    fal: srcDir + '/light',
    far: srcDir + '/regular',
    fas: srcDir + '/solid',
};

const output = __dirname + '/json';

// Create output directory
try {
    fs.mkdirSync(output, 0o755);
} catch(err) {
}

let prefixes = Object.keys(sources);
let next = () => {
    let prefix = prefixes.shift();
    if (prefix === void 0) {
        return;
    }

    let collection;
    tools.ImportDir(sources[prefix]).then(res => {

        collection = res;
        collection.prefix = prefix;

        // Nothing to optimize, so just adding currentColor
        return collection.promiseEach(svg => tools.ChangePalette(svg, {
            add: 'currentColor'
        }));

    }).then(() => {

        // Export
        return tools.ExportJSON(collection, output + '/' + prefix + '.json', {
            optimize: true
        });

    }).then(() => {

        console.log('Exported ' + collection.length() + ' icons to ' + output + '/' + prefix + '.json');
        next();

    }).catch(err => {
        console.error(err);
    });
};
next();

Run these commands:

git clone git@github.com:FortAwesome/Font-Awesome-Pro.git
npm install @iconify/tools
node index

This code assumes you have access to FontAwesome Pro repository. If you don't, unpack zip file with FontAwesome Pro somewhere, change path for srcDir to directory "svgs" of archive.

It will create files in directory "output".

[arjendejong12]

Thanks for the script and assisting me! I got it working when I cleared the .php files in the cache directory. I'm actually running into another problem when setting the correct API url:

<script src="https://code.iconify.design/1/1.0.1/iconify.min.js"></script>
<script>
  Iconify.setConfig('API', 'https://localhost/iconify/{prefix}.js?icons={icons}');
</script>

It still requests https://api.iconify.design/fal.js?icons=home, when placed inside either the or the footer. Any idea what's causing this?

[cyberalien]

If its in footer, DOM has loaded by then so Iconify starts working immediately. Try this instead:

<script>
IconifyConfig = {
 API: 'https://localhost/iconify/{prefix}.js?icons={icons}'
}
</script>
<script src="https://code.iconify.design/1/1.0.1/iconify.min.js"></script>

[cyberalien]

Oh, I see problem. Its defaultAPI, not API. Doh. Bug in documentation!

'API' config is for specific prefixes, so script would access different servers for different prefixes. Setting to change for all prefixes is defaultAPI.

<script>
  Iconify.setConfig('defaultAPI', 'https://localhost/iconify/{prefix}.js?icons={icons}');
</script>

or

<script>
IconifyConfig = {
 defaultAPI: 'https://localhost/iconify/{prefix}.js?icons={icons}'
}
</script>

[arjendejong12]

With IconifyConfig, I get the following error:

iconify.js:2114 Uncaught TypeError: url.indexOf is not a function
    at baseLength (iconify.js:2114)
    at iconify.js:2125
    at Array.forEach (<anonymous>)
    at loadQueue (iconify.js:2124)

I've debugged the error and the following variable var url = config.API[prefix] === void 0 ? config.defaultAPI : config.API[prefix]; returns an object instead of a string:

{defaultAPI: "https://localhost/iconify/{prefix}.js?icons={icons}"}

Changing the config.defaultAPI to config.defaultAPI.defaultAPI finally lets me load the icon, but I'm not sure if this is the intended behaviour.

This does not happen when I insert the script in the header. My icons load correctly in this situation.

[arjendejong12]

I've opened a PR #5 to fix the previous problem. :)

[cyberalien]

Thanks a lot for noticing and fixing! Published version 1.0.2 with your fix.

[arjendejong12]

Thank you for merging the PR! I'm going to close this issue because we resolved all of the stuff I asked you about.