Pro icon packs about iconify HOT 18 CLOSED

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.

from iconify.

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.

from iconify.

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

from iconify.

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.

from iconify.

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

from iconify.

Thanks.

from iconify.

@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?

from iconify.

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": [
        ...

from iconify.

This is what fal.json contains:

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

from iconify.

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".

from iconify.

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 [email protected]: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 [email protected]: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".

from iconify.

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?

from iconify.

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>

from iconify.

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>

from iconify.

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.

from iconify.

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

from iconify.

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

from iconify.

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

from iconify.