appolodev / vanilla-icon-picker Goto Github PK

Some icon sets are provided with categories in json files to allow the search of icons by keywords.

An example of json with categories is provided below:
https://github.com/iconify/icon-sets/blob/master/json/fa6-solid.json

Is there any way to search icons by the keywords in the categories using the icon picker search textbox?

Is there an option to be able to unset the selected icon?

Search input not working when open the picker in bootstrap modal. I can't click the input event i change z-index in css.

If the default icon doesn't exist in the current set of icons being used (e.g. if the icon sources change), you can get this error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'dataset')
    at m._renderdIcons (IconPicker.js:282:109)

In this code in src/js/IconPicker.js:

let iconValue = defaultValueElement.dataset.value;

defaultValueElement.classList.add('is-selected');

defaultValueElement is null in this case, so defaultValueElement.dataset won't work.

PR with a fix coming shortly.

Any plans for v6?

The show event comes immediatly even before any cons are loaded.

The icons all loaded event is usefull for user feedback (spinner hidden) and for icons size adjustment, as SVG's are all using ratio = 1 which does not work on an iOS device where devicepixelRatio is 3 or more...

Add possibility to use custom json path instead of presets in iconSource

We're using a Pro icon set kit with Font Awesome and were able to create a series of JSON files. That does work, but the problem is that the resulting JSON files end up being over 6 MB in total because the files include thousands of SVGs. This makes things very slow when these files load.

In our case (and probably that of many others), we don't actually need the SVGs inline because we're including the Font Awesome CSS/JavaScript on the pages of our site where the icon picker is used. If the picker just used the <i class='far fa-abacus'></i> markup, it would work fine. Removing the SVGs from the JSON files would allow us to greatly reduce the file sizes and really improve performance.

TL;DR

We're proposing a change to the JavaScript that will allow for a huge performance improvement related to downloading JSON files (95% smaller files), but will allow things to work just as they are now with existing Iconify files.

Details

We're proposing adding an optional iconFormat setting to the JSON files that could have values like:

• svg (the default) - Nothing changes. body continues to have the full SVG.

Example JSON (snipped, unchanged from current format)

{
	"prefix": "far fa-",
	"info": {
		"name": "Font Awesome Regular",
	},
	"lastModified": 1689174287,
	"icons": {
		"abacus": {
			"body": "<path d=\"M552 0c-13.25 ...  fill=\"currentColor\"/>",
			"width": 576
		},

• i - body is not needed at all. The picker would use markup like <i class='far fa-abacus'></i>.

Example JSON (snipped, iconFormat can be set to "i", body can be empty or missing entirely)

{
	"prefix": "far fa-",
    "iconFormat": "i",
	"info": {
		"name": "Font Awesome Regular",
	},
	"lastModified": 1689174287,
	"icons": {
		"abacus": { 
            "body": "",
			"width": 576
		},
		"acorn": {
			"width": 448
		},

• markup - The picker would use the actual markup set in the body. This would allow the use of different, custom markup for icons, e.g. <span class='far fa-abacus'></span>.

Example JSON (snipped, iconFormat must be set to "markup", body must be set)

{
	"prefix": "far fa-",
    "iconFormat": "markup",
	"info": {
		"name": "Font Awesome Regular",
	},
	"lastModified": 1689174287,
	"icons": {
		"abacus": {
            "body": "<i class='far fa-abacus'></i>",
			"width": 576
		},

Comparison of JSON file sizes

By adding this optional field, we can reduce the size of the JSON files by as much as 95%. We've got a PR that does this, and we've been using it. For us, this changed it from "painfully slow" to "snappy".

The main part of the change to src/js/IconPicker.js:

let iconElement;
if (iconFormat === 'i' || !value.body) {
    iconElement = document.createElement('i');
    iconElement.setAttribute('class', iconTarget.dataset.value);
}
else if (iconFormat === 'markup') {
    let t = document.createElement('template');
    t.innerHTML = value.body;
    iconElement = t.content;
}
else {
    iconElement = document.createElementNS('https://www.w3.org/2000/svg', 'svg');
    iconElement.setAttribute('height', '24');
    iconElement.setAttribute('width', '24');
    iconElement.setAttribute('viewBox', `0 0 ${value.width ? value.width : library.width} ${value.height ? value.height : library.height}`);
    iconElement.innerHTML = value.body;
}

The logic is such that:

1. If iconFormat is set to i or the body has no value, it will create markup like <i class='far fa-abacus'></i>, else...
2. If iconFormat is set to markup, it will use whatever's in body, else...
3. If none of the above are done, it will do exactly what it did before-- use the SVG.

With this, no changes need to be made to the existing Iconify files. Those will still include the SVGs in the body, so they will continue to work as they have. But, if you wanted to download those files locally, you could run something like sed or just a search-and-replace on them to remove the entire "body" value from the JSON files and reduce the required downloads by 95%.

PR to follow.

Hello,

Not everybody use node with npm as server. Is there a CDN or a standard way to load necessary assets in order to make this plugin to work ?

Thank you

We have found an issue with icon-picker modal. She appears under some elements, you need set z-index with a bigger value.

Add "materialdesignicons" as another FontIcon library. In the options you can then choose whether you want "fontawesome" or "materialdesignicons" or both activated.

https://materialdesignicons.com/