agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-12-12 13:47:49 +00:00
Code Issues Releases Activity

Re-structure SVG framework

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2020-07-01 23:29:43 +03:00
parent 782c8d3865
commit 68742d0793
34 changed files with 873 additions and 813 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/browser-tests/tests/10-finder-iconify-test.ts
View File

@ -3,7 +3,7 @@ import chai from 'chai';
import { getNode } from './node';
import { finder } from '@iconify/iconify/lib/finders/iconify';
import { IconifyElement } from '@iconify/iconify/lib/element';
import { IconifyElement } from '@iconify/iconify/lib/modules/element';
import { IconifyIconCustomisations } from '@iconify/core/lib/customisations';
const expect = chai.expect;

7
packages/browser-tests/tests/10-finder-v1-test.ts
View File

@ -2,8 +2,11 @@ import mocha from 'mocha';
import chai from 'chai';
import { getNode } from './node';
import { addFinder, findPlaceholders } from '@iconify/iconify/lib/finder';
import { IconifyFinder } from '@iconify/iconify/lib/interfaces/finder';
import {
addFinder,
findPlaceholders,
} from '@iconify/iconify/lib/modules/finder';
import { IconifyFinder } from '@iconify/iconify/lib/finders/interface';
import { finder as iconifyFinder } from '@iconify/iconify/lib/finders/iconify-v1';
import { finder as iconifyIconFinder } from '@iconify/iconify/lib/finders/iconify-v1-icon';
import { IconifyIconName } from '@iconify/core/lib/icon/name';

7
packages/browser-tests/tests/10-finder-v2-test.ts
View File

@ -2,8 +2,11 @@ import mocha from 'mocha';
import chai from 'chai';
import { getNode } from './node';
import { addFinder, findPlaceholders } from '@iconify/iconify/lib/finder';
import { IconifyFinder } from '@iconify/iconify/lib/interfaces/finder';
import {
addFinder,
findPlaceholders,
} from '@iconify/iconify/lib/modules/finder';
import { IconifyFinder } from '@iconify/iconify/lib/finders/interface';
import { finder as iconifyFinder } from '@iconify/iconify/lib/finders/iconify';
import { finder as iconifyIconFinder } from '@iconify/iconify/lib/finders/iconify-icon';
import { IconifyIconName } from '@iconify/core/lib/icon/name';

20
packages/browser-tests/tests/10-observer-creation-test.ts
View File

@ -2,20 +2,24 @@ import mocha from 'mocha';
import chai from 'chai';
import { getNode } from './node';
import { browserModules } from '@iconify/iconify/lib/modules';
import { observer } from '@iconify/iconify/lib/observer/observer';
import { setRoot } from '@iconify/iconify/lib/modules/root';
import {
initObserver,
isObserverPaused,
pauseObserver,
} from '@iconify/iconify/lib/modules/observer';
const expect = chai.expect;
describe('Testing observer creation', () => {
it('Creating observer and triggering event', (done) => {
const node = getNode('observer-creation');
browserModules.root = node;
setRoot(node);
let counter = 0;
node.innerHTML = '<div></div><ul><li>test</li><li>test2</li></ul>';
observer.init((root) => {
initObserver((root) => {
expect(root).to.be.equal(node);
counter++;
@ -23,17 +27,17 @@ describe('Testing observer creation', () => {
// Should be called only once
expect(counter).to.be.equal(1);
expect(observer.isPaused()).to.be.equal(false);
expect(isObserverPaused()).to.be.equal(false);
// Pause observer
observer.pause();
expect(observer.isPaused()).to.be.equal(true);
pauseObserver();
expect(isObserverPaused()).to.be.equal(true);
done();
});
// Add few nodes to trigger observer
expect(observer.isPaused()).to.be.equal(false);
expect(isObserverPaused()).to.be.equal(false);
node.querySelector('div').innerHTML =
'<span class="test">Some text</span><i>!</i>';
});

21
packages/browser-tests/tests/10-observer-manipulation-test.ts
View File

@ -2,23 +2,28 @@ import mocha from 'mocha';
import chai from 'chai';
import { getNode } from './node';
import { elementFinderProperty } from '@iconify/iconify/lib/element';
import { browserModules } from '@iconify/iconify/lib/modules';
import { observer } from '@iconify/iconify/lib/observer/observer';
import { elementFinderProperty } from '@iconify/iconify/lib/modules/element';
import { setRoot } from '@iconify/iconify/lib/modules/root';
import {
initObserver,
pauseObserver,
resumeObserver,
isObserverPaused,
} from '@iconify/iconify/lib/modules/observer';
const expect = chai.expect;
describe('Testing observer with DOM manipulation', () => {
it('Series of events', (done) => {
const node = getNode('observer-manipulation');
browserModules.root = node;
setRoot(node);
let counter = 0;
let waitingCallback: string | boolean = true;
node.innerHTML =
'<div></div><ul><li>test</li><li>test2</li></ul><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); vertical-align: -0.125em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi-home" data-inline="false" class="iconify"><path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"></path></svg>';
observer.init((root) => {
initObserver((root) => {
expect(root).to.be.equal(node);
expect(waitingCallback).to.be.equal(true);
@ -50,14 +55,14 @@ describe('Testing observer with DOM manipulation', () => {
waitingCallback = 'pause test';
(() => {
const item = node.querySelector('ul > li:last-child');
observer.pause();
pauseObserver();
item.innerHTML = '<string>Strong</strong> text!';
// Set timer for next step to make sure callback is not called
setTimeout(() => {
// Resume observer and wait a bit. Resuming observer should not trigger update
waitingCallback = 'resume test';
observer.resume();
resumeObserver();
setTimeout(() => {
// Change text of item: should remove <strong> and add new text node
@ -103,7 +108,7 @@ describe('Testing observer with DOM manipulation', () => {
});
// Add few nodes to trigger observer
expect(observer.isPaused()).to.be.equal(false);
expect(isObserverPaused()).to.be.equal(false);
node.querySelector('div').innerHTML =
'<span class="test">Some text</span><i>!</i>';
});

9
packages/browser-tests/tests/20-renderer-v1-test.ts
View File

@ -2,13 +2,16 @@ import mocha from 'mocha';
import chai from 'chai';
import { getNode } from './node';
import { addFinder, findPlaceholders } from '@iconify/iconify/lib/finder';
import {
addFinder,
findPlaceholders,
} from '@iconify/iconify/lib/modules/finder';
import { finder as iconifyFinder } from '@iconify/iconify/lib/finders/iconify-v1';
import { finder as iconifyIconFinder } from '@iconify/iconify/lib/finders/iconify-v1-icon';
import { getStorage, addIconSet, getIcon } from '@iconify/core/lib/storage';
import { renderIcon } from '@iconify/iconify/lib/render';
import { renderIcon } from '@iconify/iconify/lib/modules/render';
import { stringToIcon } from '@iconify/core/lib/icon/name';
import { IconifyElement } from '@iconify/iconify/lib/element';
import { IconifyElement } from '@iconify/iconify/lib/modules/element';
const expect = chai.expect;

9
packages/browser-tests/tests/20-renderer-v2-test.ts
View File

@ -2,13 +2,16 @@ import mocha from 'mocha';
import chai from 'chai';
import { getNode } from './node';
import { addFinder, findPlaceholders } from '@iconify/iconify/lib/finder';
import {
addFinder,
findPlaceholders,
} from '@iconify/iconify/lib/modules/finder';
import { finder as iconifyFinder } from '@iconify/iconify/lib/finders/iconify';
import { finder as iconifyIconFinder } from '@iconify/iconify/lib/finders/iconify-icon';
import { getStorage, addIconSet, getIcon } from '@iconify/core/lib/storage';
import { renderIcon } from '@iconify/iconify/lib/render';
import { renderIcon } from '@iconify/iconify/lib/modules/render';
import { stringToIcon } from '@iconify/core/lib/icon/name';
import { IconifyElement } from '@iconify/iconify/lib/element';
import { IconifyElement } from '@iconify/iconify/lib/modules/element';
const expect = chai.expect;

8
packages/browser-tests/tests/20-scan-dom-test.ts
View File

@ -2,12 +2,12 @@ import mocha from 'mocha';
import chai from 'chai';
import { getNode } from './node';
import { addFinder } from '@iconify/iconify/lib/finder';
import { addFinder } from '@iconify/iconify/lib/modules/finder';
import { finder as iconifyFinder } from '@iconify/iconify/lib/finders/iconify';
import { finder as iconifyIconFinder } from '@iconify/iconify/lib/finders/iconify-icon';
import { getStorage, addIconSet } from '@iconify/core/lib/storage';
import { browserModules } from '@iconify/iconify/lib/modules';
import { scanDOM } from '@iconify/iconify/lib/scanner/scan';
import { setRoot } from '@iconify/iconify/lib/modules/root';
import { scanDOM } from '@iconify/iconify/lib/modules/scanner';
const expect = chai.expect;
@ -56,7 +56,7 @@ describe('Scanning DOM', () => {
'</li>' +
'</ul></div>';
browserModules.root = node;
setRoot(node);
scanDOM();
// Find elements

12
packages/browser-tests/tests/21-scan-dom-api-test.ts
View File

@ -2,7 +2,7 @@ import mocha from 'mocha';
import chai from 'chai';
import { getNode } from './node';
import { addFinder } from '@iconify/iconify/lib/finder';
import { addFinder } from '@iconify/iconify/lib/modules/finder';
import { FakeData, setFakeData, prepareQuery, sendQuery } from './fake-api';
import { API } from '@iconify/core/lib/api/';
import { setAPIModule } from '@iconify/core/lib/api/modules';
@ -10,8 +10,8 @@ import { setAPIConfig } from '@iconify/core/lib/api/config';
import { coreModules } from '@iconify/core/lib/modules';
import { finder as iconifyFinder } from '@iconify/iconify/lib/finders/iconify';
import { finder as iconifyIconFinder } from '@iconify/iconify/lib/finders/iconify-icon';
import { browserModules } from '@iconify/iconify/lib/modules';
import { scanDOM } from '@iconify/iconify/lib/scanner/scan';
import { setRoot } from '@iconify/iconify/lib/modules/root';
import { scanDOM } from '@iconify/iconify/lib/modules/scanner';
const expect = chai.expect;
@ -114,7 +114,7 @@ describe('Scanning DOM with API', () => {
'</li>' +
'</ul></div>';
browserModules.root = node;
setRoot(node);
scanDOM();
@ -241,7 +241,7 @@ describe('Scanning DOM with API', () => {
'</li>' +
'</ul></div>';
browserModules.root = node;
setRoot(node);
scanDOM();
@ -369,7 +369,7 @@ describe('Scanning DOM with API', () => {
'</li>' +
'</ul></div>';
browserModules.root = node;
setRoot(node);
scanDOM();

129
packages/browser-tests/tests/30-iconify-without-api-test.ts Normal file
View File

@ -0,0 +1,129 @@
import mocha from 'mocha';
import chai from 'chai';
import { getNode } from './node';
import Iconify from '@iconify/iconify/lib/iconify.without-api';
const expect = chai.expect;
const selector =
'span.iconify, i.iconify, span.iconify-inline, i.iconify-inline';
const node1 = getNode('iconify-basic');
const node2 = getNode('iconify-basic');
// Set root node
Iconify.setRoot(node1);
describe('Testing Iconify object (without API)', () => {
const prefix = 'invalid-' + Date.now();
// Add mentioned icons to storage
Iconify.addCollection({
prefix,
icons: {
'account-box': {
body:
'<path d="M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" fill="currentColor"/>',
},
'account-cash': {
body:
'<path d="M11 8c0 2.21-1.79 4-4 4s-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4m0 6.72V20H0v-2c0-2.21 3.13-4 7-4c1.5 0 2.87.27 4 .72M24 20H13V3h11v17m-8-8.5a2.5 2.5 0 0 1 5 0a2.5 2.5 0 0 1-5 0M22 7a2 2 0 0 1-2-2h-3c0 1.11-.89 2-2 2v9a2 2 0 0 1 2 2h3c0-1.1.9-2 2-2V7z" fill="currentColor"/>',
},
'account': {
body:
'<path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"/>',
},
'home': {
body:
'<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
},
},
width: 24,
height: 24,
});
// Add one icon separately
Iconify.addIcon(prefix + ':id-test', {
body:
'<defs><path id="ssvg-id-1st-place-medala" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medald" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalf" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalh" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalj" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalm" d="M.93.01h120.55v58.36H.93z"/><path d="M52.849 78.373v-3.908c3.681-.359 6.25-.958 7.703-1.798c1.454-.84 2.54-2.828 3.257-5.962h4.021v40.385h-5.437V78.373h-9.544z" id="ssvg-id-1st-place-medalp"/><linearGradient x1="49.998%" y1="-13.249%" x2="49.998%" y2="90.002%" id="ssvg-id-1st-place-medalb"><stop stop-color="#1E88E5" offset="13.55%"/><stop stop-color="#1565C0" offset="93.8%"/></linearGradient><linearGradient x1="26.648%" y1="2.735%" x2="77.654%" y2="105.978%" id="ssvg-id-1st-place-medalk"><stop stop-color="#64B5F6" offset="13.55%"/><stop stop-color="#2196F3" offset="94.62%"/></linearGradient><radialGradient cx="22.368%" cy="12.5%" fx="22.368%" fy="12.5%" r="95.496%" id="ssvg-id-1st-place-medalo"><stop stop-color="#FFEB3B" offset="29.72%"/><stop stop-color="#FBC02D" offset="95.44%"/></radialGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medalc" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medala"/></mask><path fill="url(#ssvg-id-1st-place-medalb)" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medalc)" d="M45.44 42.18h31.43l30-48.43H75.44z"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medale" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medald"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medale)" fill="#424242" fill-rule="nonzero"><path d="M101.23-3L75.2 39H50.85L77.11-3h24.12zm5.64-3H75.44l-30 48h31.42l30.01-48z"/></g></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medalg" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalf"/></mask><path d="M79 30H43c-4.42 0-8 3.58-8 8v16.04c0 2.17 1.8 3.95 4.02 3.96h.01c2.23-.01 4.97-1.75 4.97-3.96V44c0-1.1.9-2 2-2h30c1.1 0 2 .9 2 2v9.93c0 1.98 2.35 3.68 4.22 4.04c.26.05.52.08.78.08c2.21 0 4-1.79 4-4V38c0-4.42-3.58-8-8-8z" fill="#FDD835" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medalg)"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medali" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalh"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medali)" fill="#424242" fill-rule="nonzero"><path d="M79 32c3.31 0 6 2.69 6 6v16.04A2.006 2.006 0 0 1 82.59 56c-1.18-.23-2.59-1.35-2.59-2.07V44c0-2.21-1.79-4-4-4H46c-2.21 0-4 1.79-4 4v10.04c0 .88-1.64 1.96-2.97 1.96c-1.12-.01-2.03-.89-2.03-1.96V38c0-3.31 2.69-6 6-6h36zm0-2H43c-4.42 0-8 3.58-8 8v16.04c0 2.17 1.8 3.95 4.02 3.96h.01c2.23-.01 4.97-1.75 4.97-3.96V44c0-1.1.9-2 2-2h30c1.1 0 2 .9 2 2v9.93c0 1.98 2.35 3.68 4.22 4.04c.26.05.52.08.78.08c2.21 0 4-1.79 4-4V38c0-4.42-3.58-8-8-8z"/></g></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medall" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalj"/></mask><path fill="url(#ssvg-id-1st-place-medalk)" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medall)" d="M76.87 42.18H45.44l-30-48.43h31.43z"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medaln" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalm"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medaln)" fill="#424242" fill-rule="nonzero"><path d="M45.1-3l26.35 42H47.1L20.86-3H45.1zm1.77-3H15.44l30 48h31.42L46.87-6z"/></g></g><circle fill="url(#ssvg-id-1st-place-medalo)" fill-rule="nonzero" cx="64" cy="86" r="38"/><path d="M64 51c19.3 0 35 15.7 35 35s-15.7 35-35 35s-35-15.7-35-35s15.7-35 35-35zm0-3c-20.99 0-38 17.01-38 38s17.01 38 38 38s38-17.01 38-38s-17.01-38-38-38z" opacity=".2" fill="#424242" fill-rule="nonzero"/><path d="M47.3 63.59h33.4v44.4H47.3z"/><use fill="#000" xlink:href="#ssvg-id-1st-place-medalp"/><use fill="#FFA000" xlink:href="#ssvg-id-1st-place-medalp"/></g>',
width: 128,
height: 128,
});
it('Check iconExists', () => {
expect(Iconify.iconExists(prefix + ':' + 'account')).to.be.equal(true);
expect(Iconify.iconExists(prefix + ':' + 'missing')).to.be.equal(false);
expect(Iconify.iconExists(prefix + '-123:' + 'missing')).to.be.equal(
false
);
});
it('Get SVG node', () => {
const node = Iconify.renderSVG(prefix + ':account', {
inline: true,
});
expect(node).to.not.be.equal(null);
const html = node.outerHTML;
console.log('Rendered SVG:', html);
expect(html.indexOf('<svg')).to.be.equal(0);
// Get HTML
const html2 = Iconify.renderHTML(prefix + ':account', {
inline: true,
});
expect(html2).to.be.equal(html);
});
it('Rendering icons without API', (done) => {
node1.innerHTML =
'<div><p>Testing Iconify without API</p>' +
' <span class="iconify-inline" data-icon="' +
prefix +
':home" style="color: red; box-shadow: 0 0 2px black;"></span>' +
' <i class="iconify-inline test-icon iconify--mdi-account" data-icon="' +
prefix +
':account" style="vertical-align: 0;" data-flip="horizontal" aria-hidden="false"></i>' +
' <i class="iconify" data-icon="' +
prefix +
':account-cash" title="&lt;Cash&gt;!"></i>' +
' <span class="iconify" data-icon="' +
prefix +
':account-box" data-inline="true" data-rotate="2" data-width="42"></span>' +
' <span class="iconify" data-icon="' +
prefix +
':id-test"></span>' +
'</div>';
node2.innerHTML =
'<div><p>This node should not be replaced</p>' +
'<span class="iconify" data-icon="' +
prefix +
':home" style="color: red; box-shadow: 0 0 2px black;"></span>';
// Icons should not have been replaced yet
let list = node1.querySelectorAll(selector);
expect(list.length).to.be.equal(5);
list = node2.querySelectorAll(selector);
expect(list.length).to.be.equal(1);
// Check in ticks
setTimeout(() => {
setTimeout(() => {
list = node1.querySelectorAll(selector);
expect(list.length).to.be.equal(0);
list = node2.querySelectorAll(selector);
expect(list.length).to.be.equal(1);
// Test SVG with ID
const idTest = node1.querySelector('#ssvg-id-1st-place-medala');
expect(idTest).to.be.equal(null, 'Expecting ID to be replaced');
done();
});
});
});
});

46
packages/iconify/api-extractor.without-api.min.json Normal file
View File

@ -0,0 +1,46 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
"mainEntryPointFilePath": "lib/iconify.without-api.d.ts",
"bundledPackages": [
"@iconify/types",
"@iconify/core",
"@cyberalien/redundancy"
],
"compiler": {},
"apiReport": {
"enabled": false
},
"docModel": {
"enabled": false
},
"dtsRollup": {
"enabled": true,
"untrimmedFilePath": "<projectFolder>/dist/iconify.without-api.min.d.ts"
},
"tsdocMetadata": {
"enabled": false
},
"messages": {
"compilerMessageReporting": {
"default": {
"logLevel": "none"
}
},
"extractorMessageReporting": {
"default": {
"logLevel": "none"
},
"ae-missing-release-tag": {
"logLevel": "none"
},
"ae-forgotten-export": {
"logLevel": "none"
}
},
"tsdocMessageReporting": {
"default": {
"logLevel": "none"
}
}
}
}

1
packages/iconify/build.js
View File

@ -80,6 +80,7 @@ if (compile.core) {
// Add api2
if (compile.api) {
compile.api2 = true;
compile.api2min = true;
}
// Compile other packages

156
packages/iconify/demo/loading-icons.without-api.html Normal file
View File

@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Iconify Demo: Loading Icons (without API)</title>
<style>
html,
body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
}
body {
padding: 8px;
font-size: 16px;
line-height: 24px;
}
p {
margin: 0;
padding: 8px;
color: rgba(0, 0, 0, 0.8);
}
p:nth-child(2n) {
background-color: #f8f8f8;
}
svg {
color: #292;
}
</style>
<script>
// Preload icons before importing Iconify
IconifyPreload = [
{
prefix: 'z123-preload',
icons: {
check2: {
body:
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
},
},
width: 16,
height: 16,
},
{
provider: 'test-provider',
prefix: 'z234-preload',
icons: {
check2: {
body:
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
},
},
width: 16,
height: 16,
},
];
</script>
<script src="../dist/iconify.without-api.min.js"></script>
<script>
// Add icons without provider
Iconify.addCollection({
prefix: 'z123-add-collection',
icons: {
check2: {
body:
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
},
},
width: 16,
height: 16,
});
Iconify.addIcon('z123-add-icon:check2', {
body:
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
width: 16,
height: 16,
});
// Add icons with provider
Iconify.addCollection(
{
prefix: 'z234-add-collection',
icons: {
check2: {
body:
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
},
},
width: 16,
height: 16,
},
'test-provider'
);
Iconify.addIcon('@test-provider:z234-add-icon:check2', {
body:
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
width: 16,
height: 16,
});
</script>
</head>
<body>
<p>
This page tests various ways to dynamically load icons without API
(except for first example that uses API).<br />
On success, after each line of text there should be a green icon.
</p>
<p>
Icon loaded from API (should not load):
<span class="iconify-inline" data-icon="bi:check2"></span>
</p>
<p>
Icon loaded with addCollection():
<span
class="iconify-inline"
data-icon="z123-add-collection:check2"
></span>
</p>
<p>
Icon loaded with addIcon():
<span
class="iconify-inline"
data-icon="z123-add-icon:check2"
></span>
</p>
<p>
Icon loaded with IconifyPreload:
<span class="iconify-inline" data-icon="z123-preload:check2"></span>
</p>
<p>
Icon loaded with addCollection() and custom provider:
<span
class="iconify-inline"
data-icon="@test-provider:z234-add-collection:check2"
></span>
</p>
<p>
Icon loaded with addIcon() and custom provider:
<span
class="iconify-inline"
data-icon="@test-provider:z234-add-icon:check2"
></span>
</p>
<p>
Icon loaded with IconifyPreload and custom provider:
<span
class="iconify-inline"
data-icon="@test-provider:z234-preload:check2"
></span>
</p>
</body>
</html>

3
packages/iconify/package.json
View File

@ -19,7 +19,8 @@
"build:lib": "tsc -b",
"build:dist": "rollup -c rollup.config.js",
"build:api": "api-extractor run --local --verbose",
"build:api2": "api-extractor run --local --verbose --config api-extractor.without-api.json"
"build:api2": "api-extractor run --local --verbose --config api-extractor.without-api.json",
"build:api2min": "api-extractor run --local --config api-extractor.without-api.min.json"
},
"devDependencies": {
"@cyberalien/redundancy": "^1.0.0",

332
packages/iconify/src/common.ts
View File

@ -1,10 +1,139 @@
import { IconifyJSON } from '@iconify/types';
import { IconifyIcon } from '@iconify/core/lib/icon';
import { merge } from '@iconify/core/lib/misc/merge';
import {
stringToIcon,
validateIcon,
IconifyIconName,
} from '@iconify/core/lib/icon/name';
import { IconifyIcon, FullIconifyIcon } from '@iconify/core/lib/icon';
import {
IconifyIconCustomisations,
fullCustomisations,
} from '@iconify/core/lib/customisations';
import {
getStorage,
getIcon,
addIcon,
addIconSet,
listStoredProviders,
listStoredPrefixes,
} from '@iconify/core/lib/storage';
import { iconToSVG, IconifyIconBuildResult } from '@iconify/core/lib/builder';
import { replaceIDs } from '@iconify/core/lib/builder/ids';
import { renderIcon } from './modules/render';
import {
initObserver,
pauseObserver,
resumeObserver,
} from './modules/observer';
import { scanDOM } from './modules/scanner';
// Finders
import { addFinder } from './modules/finder';
import { finder as iconifyFinder } from './finders/iconify';
import { setRoot } from './modules/root';
// import { finder as iconifyIconFinder } from './finders/iconify-icon';
/**
* Get icon name
*/
function getIconName(name: string): IconifyIconName | null {
const icon = stringToIcon(name);
if (!validateIcon(icon)) {
return null;
}
return icon;
}
/**
* Get icon data
*/
function getIconData(name: string): FullIconifyIcon | null {
const icon = getIconName(name);
return icon
? getIcon(getStorage(icon.provider, icon.prefix), icon.name)
: null;
}
/**
* Get SVG data
*/
function buildIcon(
name: string,
customisations: IconifyIconCustomisations
): IconifyIconBuildResult | null {
// Get icon data
const iconData = getIconData(name);
if (!iconData) {
return null;
}
// Clean up customisations
const changes = fullCustomisations(customisations);
// Get data
return iconToSVG(iconData, changes);
}
/**
* Generate icon
*/
function generateIcon(
name: string,
customisations: IconifyIconCustomisations,
returnString: boolean
): SVGElement | string | null {
// Get icon data
const iconData = getIconData(name);
if (!iconData) {
return null;
}
// Split name
const iconName = stringToIcon(name);
// Clean up customisations
const changes = fullCustomisations(customisations);
// Get data
return (renderIcon(
{
name: iconName,
},
changes,
iconData,
returnString
) as unknown) as SVGElement | string | null;
}
/**
* Add icon set
*/
export function addCollection(data: IconifyJSON, provider?: string) {
if (typeof provider !== 'string') {
provider = typeof data.provider === 'string' ? data.provider : '';
}
if (
typeof data !== 'object' ||
typeof data.prefix !== 'string' ||
!validateIcon({
provider,
prefix: data.prefix,
name: 'a',
})
) {
return false;
}
const storage = getStorage(provider, data.prefix);
return !!addIconSet(storage, data);
}
/**
* Iconify interface
*/
export interface IconifyGlobalCommon {
export interface IconifyGlobal {
/* General section */
/**
* Get version
@ -37,4 +166,203 @@ export interface IconifyGlobalCommon {
* Add icon set to storage
*/
addCollection: (data: IconifyJSON, provider?: string) => boolean;
/**
* Render icons
*/
renderSVG: (
name: string,
customisations: IconifyIconCustomisations
) => SVGElement | null;
renderHTML: (
name: string,
customisations: IconifyIconCustomisations
) => string | null;
/**
* Get icon data
*/
renderIcon: typeof buildIcon;
/**
* Replace IDs in icon body, should be used when parsing buildIcon() result
*/
replaceIDs: typeof replaceIDs;
/* Scanner */
/**
* Scan DOM
*/
scanDOM: typeof scanDOM;
/**
* Set root node
*/
setRoot: (root: HTMLElement) => void;
/* Observer */
/**
* Pause observer
*/
pauseObserver: typeof pauseObserver;
/**
* Resume observer
*/
resumeObserver: typeof resumeObserver;
}
/**
* Global variable
*/
export const IconifyCommon: IconifyGlobal = {
// Version
getVersion: () => '__iconify_version__',
// Check if icon exists
iconExists: (name) => getIconData(name) !== null,
// Get raw icon data
getIcon: (name) => {
const result = getIconData(name);
return result ? merge(result) : null;
},
// List icons
listIcons: (provider?: string, prefix?: string) => {
let icons = [];
// Get providers
let providers: string[];
if (typeof provider === 'string') {
providers = [provider];
} else {
providers = listStoredProviders();
}
// Get all icons
providers.forEach((provider) => {
let prefixes: string[];
if (typeof prefix === 'string') {
prefixes = [prefix];
} else {
prefixes = listStoredPrefixes(provider);
}
prefixes.forEach((prefix) => {
const storage = getStorage(provider, prefix);
let icons = Object.keys(storage.icons).map(
(name) =>
(provider !== '' ? '@' + provider + ':' : '') +
prefix +
':' +
name
);
icons = icons.concat(icons);
});
});
return icons;
},
// Add icon
addIcon: (name, data) => {
const icon = getIconName(name);
if (!icon) {
return false;
}
const storage = getStorage(icon.provider, icon.prefix);
return addIcon(storage, icon.name, data);
},
// Add icon set
addCollection,
// Render SVG
renderSVG: (name: string, customisations: IconifyIconCustomisations) => {
return generateIcon(name, customisations, false) as SVGElement | null;
},
renderHTML: (name: string, customisations: IconifyIconCustomisations) => {
return generateIcon(name, customisations, true) as string | null;
},
// Get rendered icon as object that can be used to create SVG (use replaceIDs on body)
renderIcon: buildIcon,
// Replace IDs in body
replaceIDs,
// Scan DOM
scanDOM,
// Set root node
setRoot: (root: HTMLElement) => {
setRoot(root);
// Restart observer
initObserver(scanDOM);
// Scan DOM on next tick
setTimeout(scanDOM);
},
// Pause observer
pauseObserver,
// Resume observer
resumeObserver,
};
/**
* Initialise stuff
*/
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
// Add finder modules
// addFinder(iconifyIconFinder);
addFinder(iconifyFinder);
const _window = window;
// Load icons from global "IconifyPreload"
interface WindowWithIconifyPreload {
IconifyPreload: IconifyJSON[] | IconifyJSON;
}
if (
((_window as unknown) as WindowWithIconifyPreload).IconifyPreload !==
void 0
) {
const preload = ((_window as unknown) as WindowWithIconifyPreload)
.IconifyPreload;
const err = 'Invalid IconifyPreload syntax.';
if (typeof preload === 'object' && preload !== null) {
(preload instanceof Array ? preload : [preload]).forEach((item) => {
try {
if (
// Check if item is an object and not null/array
typeof item !== 'object' ||
item === null ||
item instanceof Array ||
// Check for 'icons' and 'prefix'
typeof item.icons !== 'object' ||
typeof item.prefix !== 'string' ||
// Add icon set
!addCollection(item)
) {
console.error(err);
}
} catch (e) {
console.error(err);
}
});
}
}
// Load observer
setTimeout(() => {
// Init on next tick when entire document has been parsed
initObserver(scanDOM);
});
}

4
packages/iconify/src/finders/iconify-icon.ts
View File

@ -1,5 +1,5 @@
import { IconifyFinder } from '../interfaces/finder';
import { IconifyElement } from '../element';
import { IconifyFinder } from './interface';
import { IconifyElement } from '../modules/element';
import { IconifyIconCustomisations } from '@iconify/core/lib/customisations';
import { finder as iconifyFinder } from './iconify';

4
packages/iconify/src/finders/iconify-v1-icon.ts
View File

@ -1,5 +1,5 @@
import { IconifyFinder } from '../interfaces/finder';
import { IconifyElement } from '../element';
import { IconifyFinder } from './interface';
import { IconifyElement } from '../modules/element';
import { IconifyIconCustomisations } from '@iconify/core/lib/customisations';
import { finder as iconifyFinder } from './iconify-v1';

10
packages/iconify/src/finders/iconify-v1.ts
View File

@ -1,5 +1,5 @@
import { IconifyFinder } from '../interfaces/finder';
import { IconifyElement } from '../element';
import { IconifyFinder } from './interface';
import { IconifyElement } from '../modules/element';
import { IconifyIconCustomisations } from '@iconify/core/lib/customisations';
import { rotateFromString } from '@iconify/core/lib/customisations/rotate';
import {
@ -118,7 +118,7 @@ const finder: IconifyFinder = {
}
// Boolean attributes
booleanAttributes.forEach(attr => {
booleanAttributes.forEach((attr) => {
if (hasAttribute(element, 'data-' + attr)) {
const value = getBooleanAttribute(element, 'data-' + attr);
if (typeof value === 'boolean') {
@ -128,7 +128,7 @@ const finder: IconifyFinder = {
});
// String attributes
stringAttributes.forEach(attr => {
stringAttributes.forEach((attr) => {
if (hasAttribute(element, 'data-' + attr)) {
const value = getAttribute(element, 'data-' + attr);
if (value !== '') {
@ -145,7 +145,7 @@ const finder: IconifyFinder = {
*/
classFilter: (classList: string[]): string[] => {
let result: string[] = [];
classList.forEach(className => {
classList.forEach((className) => {
if (
className !== 'iconify' &&
className !== '' &&

10
packages/iconify/src/finders/iconify.ts
View File

@ -1,5 +1,5 @@
import { IconifyFinder } from '../interfaces/finder';
import { IconifyElement } from '../element';
import { IconifyFinder } from './interface';
import { IconifyElement } from '../modules/element';
import { IconifyIconCustomisations } from '@iconify/core/lib/customisations';
import { rotateFromString } from '@iconify/core/lib/customisations/rotate';
import {
@ -134,7 +134,7 @@ const finder: IconifyFinder = {
}
// Boolean attributes
booleanAttributes.forEach(attr => {
booleanAttributes.forEach((attr) => {
if (hasAttribute(element, 'data-' + attr)) {
const value = getBooleanAttribute(element, 'data-' + attr);
if (typeof value === 'boolean') {
@ -144,7 +144,7 @@ const finder: IconifyFinder = {
});
// String attributes
stringAttributes.forEach(attr => {
stringAttributes.forEach((attr) => {
if (hasAttribute(element, 'data-' + attr)) {
const value = getAttribute(element, 'data-' + attr);
if (value !== '') {
@ -161,7 +161,7 @@ const finder: IconifyFinder = {
*/
classFilter: (classList: string[]): string[] => {
let result: string[] = [];
classList.forEach(className => {
classList.forEach((className) => {
if (
className !== 'iconify' &&
className !== '' &&

2
packages/iconify/src/interfaces/finder.ts → packages/iconify/src/finders/interface.ts
View File

@ -1,4 +1,4 @@
import { IconifyElement } from '../element';
import { IconifyElement } from '../modules/element';
import { IconifyIconName } from '@iconify/core/lib/icon/name';
import { IconifyIconCustomisations } from '@iconify/core/lib/customisations';

310
packages/iconify/src/iconify.ts
View File

@ -1,45 +1,28 @@
// Core
import { IconifyJSON } from '@iconify/types';
import { merge } from '@iconify/core/lib/misc/merge';
import {
stringToIcon,
validateIcon,
IconifyIconName,
} from '@iconify/core/lib/icon/name';
import { IconifyIcon, FullIconifyIcon } from '@iconify/core/lib/icon';
import { IconifyIconName } from '@iconify/core/lib/icon/name';
import { IconifyIcon } from '@iconify/core/lib/icon';
import {
IconifyIconCustomisations,
fullCustomisations,
IconifyIconSize,
IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment,
} from '@iconify/core/lib/customisations';
import {
getStorage,
getIcon,
addIcon,
addIconSet,
listStoredProviders,
listStoredPrefixes,
} from '@iconify/core/lib/storage';
import { iconToSVG, IconifyIconBuildResult } from '@iconify/core/lib/builder';
import { replaceIDs } from '@iconify/core/lib/builder/ids';
import { IconifyIconBuildResult } from '@iconify/core/lib/builder';
import { calcSize } from '@iconify/core/lib/builder/calc-size';
// Modules
import { coreModules } from '@iconify/core/lib/modules';
import { browserModules } from './modules';
// Finders
import { addFinder } from './finder';
import { finder as iconifyFinder } from './finders/iconify';
// import { finder as iconifyIconFinder } from './finders/iconify-icon';
// Cache
import { storeCache, loadCache, config } from '@iconify/core/lib/cache/storage';
// API
import { IconifyAPI, IconifyExposedAPIInternals } from './api';
import {
IconifyAPI,
IconifyExposedAPIInternals,
IconifyCacheType,
} from './modules/api';
import {
API,
getRedundancyCache,
@ -66,22 +49,9 @@ import {
IconifyIconLoaderAbort,
} from '@iconify/core/lib/interfaces/loader';
// Observer
import { IconifyObserver } from './observer';
import { observer } from './observer/observer';
// Render
import { IconifyRenderer } from './renderer';
import { renderIcon } from './renderer/render';
// Scan
import { IconifyScanner } from './scanner';
import { scanDOM } from './scanner/scan';
// Other
import { IconifyExposedCommonInternals } from './internals';
import { IconifyGlobalCommon } from './common';
import { IconifyCacheType } from '../dist/iconify';
import { IconifyGlobal as IconifyGlobal1, IconifyCommon } from './common';
/**
* Export required types
@ -125,221 +95,33 @@ export interface IconifyExposedInternals
IconifyExposedCommonInternals {}
/**
* Iconify interface
* Exported functions
*/
export interface IconifyGlobal
extends IconifyGlobalCommon,
IconifyScanner,
IconifyObserver,
IconifyRenderer,
IconifyAPI {
export interface IconifyGlobal2 extends IconifyAPI {
/**
* Expose internal functions
*/
_internal: IconifyExposedInternals;
}
/**
* Iconify interface
*/
export interface IconifyGlobal extends IconifyGlobal1, IconifyGlobal2 {}
// Export dependencies
export { IconifyObserver, IconifyScanner, IconifyRenderer, IconifyAPI };
/**
* Get icon name
*/
function getIconName(name: string): IconifyIconName | null {
const icon = stringToIcon(name);
if (!validateIcon(icon)) {
return null;
}
return icon;
}
/**
* Get icon data
*/
function getIconData(name: string): FullIconifyIcon | null {
const icon = getIconName(name);
return icon
? getIcon(getStorage(icon.provider, icon.prefix), icon.name)
: null;
}
/**
* Get SVG data
*/
function buildIcon(
name: string,
customisations: IconifyIconCustomisations
): IconifyIconBuildResult | null {
// Get icon data
const iconData = getIconData(name);
if (!iconData) {
return null;
}
// Clean up customisations
const changes = fullCustomisations(customisations);
// Get data
return iconToSVG(iconData, changes);
}
/**
* Generate icon
*/
function generateIcon(
name: string,
customisations: IconifyIconCustomisations,
returnString: boolean
): SVGElement | string | null {
// Get icon data
const iconData = getIconData(name);
if (!iconData) {
return null;
}
// Split name
const iconName = stringToIcon(name);
// Clean up customisations
const changes = fullCustomisations(customisations);
// Get data
return (renderIcon(
{
name: iconName,
},
changes,
iconData,
returnString
) as unknown) as SVGElement | string | null;
}
/**
* Add icon set
*/
function addCollection(data: IconifyJSON, provider?: string) {
if (typeof provider !== 'string') {
provider = typeof data.provider === 'string' ? data.provider : '';
}
if (
typeof data !== 'object' ||
typeof data.prefix !== 'string' ||
!validateIcon({
provider,
prefix: data.prefix,
name: 'a',
})
) {
return false;
}
const storage = getStorage(provider, data.prefix);
return !!addIconSet(storage, data);
}
export { IconifyGlobal as IconifyGlobalCommon, IconifyAPI };
/**
* Global variable
*/
const Iconify: IconifyGlobal = {
// Version
getVersion: () => '__iconify_version__',
// Check if icon exists
iconExists: (name) => getIconData(name) !== null,
// Get raw icon data
getIcon: (name) => {
const result = getIconData(name);
return result ? merge(result) : null;
},
// List icons
listIcons: (provider?: string, prefix?: string) => {
let icons = [];
// Get providers
let providers: string[];
if (typeof provider === 'string') {
providers = [provider];
} else {
providers = listStoredProviders();
}
// Get all icons
providers.forEach((provider) => {
let prefixes: string[];
if (typeof prefix === 'string') {
prefixes = [prefix];
} else {
prefixes = listStoredPrefixes(provider);
}
prefixes.forEach((prefix) => {
const storage = getStorage(provider, prefix);
let icons = Object.keys(storage.icons).map(
(name) =>
(provider !== '' ? '@' + provider + ':' : '') +
prefix +
':' +
name
);
icons = icons.concat(icons);
});
});
return icons;
},
const Iconify: IconifyGlobal = ({
// Load icons
loadIcons: API.loadIcons,
// Render SVG
renderSVG: (name: string, customisations: IconifyIconCustomisations) => {
return generateIcon(name, customisations, false) as SVGElement | null;
},
renderHTML: (name: string, customisations: IconifyIconCustomisations) => {
return generateIcon(name, customisations, true) as string | null;
},
// Get rendered icon as object that can be used to create SVG (use replaceIDs on body)
renderIcon: buildIcon,
// Replace IDs in body
replaceIDs: replaceIDs,
// Add icon
addIcon: (name, data) => {
const icon = getIconName(name);
if (!icon) {
return false;
}
const storage = getStorage(icon.provider, icon.prefix);
return addIcon(storage, icon.name, data);
},
// Add icon set
addCollection: addCollection,
// API providers
addAPIProvider: setAPIConfig,
// Scan DOM
scanDOM: scanDOM,
// Set root node
setRoot: (root: HTMLElement) => {
browserModules.root = root;
// Restart observer
observer.init(scanDOM);
// Scan DOM on next tick
setTimeout(scanDOM);
},
// Allow storage
enableCache: (storage: IconifyCacheType, value: boolean) => {
switch (storage) {
@ -356,10 +138,6 @@ const Iconify: IconifyGlobal = {
}
},
// Observer
pauseObserver: observer.pause,
resumeObserver: observer.resume,
// Exposed internal functions
_internal: {
// Calculate size
@ -374,7 +152,12 @@ const Iconify: IconifyGlobal = {
// Get API module
setAPIModule,
},
};
} as IconifyGlobal2) as IconifyGlobal;
// Merge with common functions
for (const key in IconifyCommon) {
Iconify[key] = IconifyCommon[key];
}
/**
* Initialise stuff
@ -394,50 +177,12 @@ try {
setAPIModule('', getAPIModule(getAPIConfig));
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
// Add finder modules
// addFinder(iconifyIconFinder);
addFinder(iconifyFinder);
// Set cache and load existing cache
coreModules.cache = storeCache;
loadCache();
const _window = window;
// Load icons from global "IconifyPreload"
interface WindowWithIconifyPreload {
IconifyPreload: IconifyJSON[] | IconifyJSON;
}
if (
((_window as unknown) as WindowWithIconifyPreload).IconifyPreload !==
void 0
) {
const preload = ((_window as unknown) as WindowWithIconifyPreload)
.IconifyPreload;
const err = 'Invalid IconifyPreload syntax.';
if (typeof preload === 'object' && preload !== null) {
(preload instanceof Array ? preload : [preload]).forEach((item) => {
try {
if (
// Check if item is an object and not null/array
typeof item !== 'object' ||
item === null ||
item instanceof Array ||
// Check for 'icons' and 'prefix'
typeof item.icons !== 'object' ||
typeof item.prefix !== 'string' ||
// Add icon set
!addCollection(item)
) {
console.error(err);
}
} catch (e) {
console.error(err);
}
});
}
}
// Set API from global "IconifyProviders"
interface WindowWithIconifyProviders {
IconifyProviders: Record<string, PartialIconifyAPIConfig>;
@ -469,13 +214,6 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
}
}
}
// Load observer
browserModules.observer = observer;
setTimeout(() => {
// Init on next tick when entire document has been parsed
observer.init(scanDOM);
});
}
export default Iconify;

309
packages/iconify/src/iconify.without-api.ts
View File

@ -1,54 +1,19 @@
// Core
import { IconifyJSON } from '@iconify/types';
import { merge } from '@iconify/core/lib/misc/merge';
import {
stringToIcon,
validateIcon,
IconifyIconName,
} from '@iconify/core/lib/icon/name';
import { IconifyIcon, FullIconifyIcon } from '@iconify/core/lib/icon';
import { IconifyIconName } from '@iconify/core/lib/icon/name';
import { IconifyIcon } from '@iconify/core/lib/icon';
import {
IconifyIconCustomisations,
fullCustomisations,
IconifyIconSize,
IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment,
} from '@iconify/core/lib/customisations';
import {
getStorage,
getIcon,
addIcon,
addIconSet,
listStoredProviders,
listStoredPrefixes,
} from '@iconify/core/lib/storage';
import { iconToSVG, IconifyIconBuildResult } from '@iconify/core/lib/builder';
import { replaceIDs } from '@iconify/core/lib/builder/ids';
import { IconifyIconBuildResult } from '@iconify/core/lib/builder';
import { calcSize } from '@iconify/core/lib/builder/calc-size';
// Modules
import { browserModules } from './modules';
// Finders
import { addFinder } from './finder';
import { finder as iconifyFinder } from './finders/iconify';
// import { finder as iconifyIconFinder } from './finders/iconify-icon';
// Observer
import { IconifyObserver } from './observer';
import { observer } from './observer/observer';
// Render
import { IconifyRenderer } from './renderer';
import { renderIcon } from './renderer/render';
// Scan
import { IconifyScanner } from './scanner';
import { scanDOM } from './scanner/scan';
// Other
// Local code
import { IconifyExposedCommonInternals } from './internals';
import { IconifyGlobalCommon } from './common';
import { IconifyGlobal as IconifyGlobal1, IconifyCommon } from './common';
/**
* Export required types
@ -78,275 +43,37 @@ export interface IconifyExposedInternals
extends IconifyExposedCommonInternals {}
/**
* Iconify interface
* Exported functions
*/
export interface IconifyGlobal
extends IconifyGlobalCommon,
IconifyScanner,
IconifyObserver,
IconifyRenderer {
export interface IconifyGlobal2 {
/**
* Expose internal functions
*/
_internal: IconifyExposedInternals;
}
/**
* Iconify interface
*/
export interface IconifyGlobal extends IconifyGlobal1, IconifyGlobal2 {}
// Export dependencies
export { IconifyObserver, IconifyScanner, IconifyRenderer };
/**
* Get icon name
*/
function getIconName(name: string): IconifyIconName | null {
const icon = stringToIcon(name);
if (!validateIcon(icon)) {
return null;
}
return icon;
}
/**
* Get icon data
*/
function getIconData(name: string): FullIconifyIcon | null {
const icon = getIconName(name);
return icon
? getIcon(getStorage(icon.provider, icon.prefix), icon.name)
: null;
}
/**
* Get SVG data
*/
function buildIcon(
name: string,
customisations: IconifyIconCustomisations
): IconifyIconBuildResult | null {
// Get icon data
const iconData = getIconData(name);
if (!iconData) {
return null;
}
// Clean up customisations
const changes = fullCustomisations(customisations);
// Get data
return iconToSVG(iconData, changes);
}
/**
* Generate icon
*/
function generateIcon(
name: string,
customisations: IconifyIconCustomisations,
returnString: boolean
): SVGElement | string | null {
// Get icon data
const iconData = getIconData(name);
if (!iconData) {
return null;
}
// Split name
const iconName = stringToIcon(name);
// Clean up customisations
const changes = fullCustomisations(customisations);
// Get data
return (renderIcon(
{
name: iconName,
},
changes,
iconData,
returnString
) as unknown) as SVGElement | string | null;
}
/**
* Add icon set
*/
function addCollection(data: IconifyJSON, provider?: string) {
if (typeof provider !== 'string') {
provider = typeof data.provider === 'string' ? data.provider : '';
}
if (
typeof data !== 'object' ||
typeof data.prefix !== 'string' ||
!validateIcon({
provider,
prefix: data.prefix,
name: 'a',
})
) {
return false;
}
const storage = getStorage(provider, data.prefix);
return !!addIconSet(storage, data);
}
export { IconifyGlobal as IconifyGlobalCommon };
/**
* Global variable
*/
const Iconify: IconifyGlobal = {
// Version
getVersion: () => '__iconify_version__',
// Check if icon exists
iconExists: (name) => getIconData(name) !== null,
// Get raw icon data
getIcon: (name) => {
const result = getIconData(name);
return result ? merge(result) : null;
},
// List icons
listIcons: (provider?: string, prefix?: string) => {
let icons = [];
// Get providers
let providers: string[];
if (typeof provider === 'string') {
providers = [provider];
} else {
providers = listStoredProviders();
}
// Get all icons
providers.forEach((provider) => {
let prefixes: string[];
if (typeof prefix === 'string') {
prefixes = [prefix];
} else {
prefixes = listStoredPrefixes(provider);
}
prefixes.forEach((prefix) => {
const storage = getStorage(provider, prefix);
let icons = Object.keys(storage.icons).map(
(name) =>
(provider !== '' ? '@' + provider + ':' : '') +
prefix +
':' +
name
);
icons = icons.concat(icons);
});
});
return icons;
},
// Render SVG
renderSVG: (name: string, customisations: IconifyIconCustomisations) => {
return generateIcon(name, customisations, false) as SVGElement | null;
},
renderHTML: (name: string, customisations: IconifyIconCustomisations) => {
return generateIcon(name, customisations, true) as string | null;
},
// Get rendered icon as object that can be used to create SVG (use replaceIDs on body)
renderIcon: buildIcon,
// Replace IDs in body
replaceIDs: replaceIDs,
// Add icon
addIcon: (name, data) => {
const icon = getIconName(name);
if (!icon) {
return false;
}
const storage = getStorage(icon.provider, icon.prefix);
return addIcon(storage, icon.name, data);
},
// Add icon set
addCollection: addCollection,
// Scan DOM
scanDOM: scanDOM,
// Set root node
setRoot: (root: HTMLElement) => {
browserModules.root = root;
// Restart observer
observer.init(scanDOM);
// Scan DOM on next tick
setTimeout(scanDOM);
},
// Observer
pauseObserver: observer.pause,
resumeObserver: observer.resume,
const Iconify: IconifyGlobal = ({
// Exposed internal functions
_internal: {
// Calculate size
calculateSize: calcSize,
},
};
} as IconifyGlobal2) as IconifyGlobal;
/**
* Initialise stuff
*/
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
// Add finder modules
// addFinder(iconifyIconFinder);
addFinder(iconifyFinder);
const _window = window;
// Load icons from global "IconifyPreload"
interface WindowWithIconifyPreload {
IconifyPreload: IconifyJSON[] | IconifyJSON;
}
if (
((_window as unknown) as WindowWithIconifyPreload).IconifyPreload !==
void 0
) {
const preload = ((_window as unknown) as WindowWithIconifyPreload)
.IconifyPreload;
const err = 'Invalid IconifyPreload syntax.';
if (typeof preload === 'object' && preload !== null) {
(preload instanceof Array ? preload : [preload]).forEach((item) => {
try {
if (
// Check if item is an object and not null/array
typeof item !== 'object' ||
item === null ||
item instanceof Array ||
// Check for 'icons' and 'prefix'
typeof item.icons !== 'object' ||
typeof item.prefix !== 'string' ||
// Add icon set
!addCollection(item)
) {
console.error(err);
}
} catch (e) {
console.error(err);
}
});
}
}
// Load observer
browserModules.observer = observer;
setTimeout(() => {
// Init on next tick when entire document has been parsed
observer.init(scanDOM);
});
// Merge with common functions
for (const key in IconifyCommon) {
Iconify[key] = IconifyCommon[key];
}
export default Iconify;

22
packages/iconify/src/interfaces/observer.ts
View File

@ -1,22 +0,0 @@
/**
* Observer callback function
*/
export type ObserverCallback = (root: HTMLElement) => void;
/**
* Observer functions
*/
type InitObserver = (callback: ObserverCallback) => void;
type PauseObserver = () => void;
type ResumeObserver = () => void;
type IsObserverPaused = () => boolean;
/**
* Observer functions
*/
export interface Observer {
init: InitObserver;
pause: PauseObserver;
resume: ResumeObserver;
isPaused: IsObserverPaused;
}

25
packages/iconify/src/modules.ts
View File

@ -1,25 +0,0 @@
import { Observer } from './interfaces/observer';
/**
* Dynamic modules.
*
* Also see modules.ts in core package.
*/
interface Modules {
// Root element
root?: HTMLElement;
// Observer module
observer?: Observer;
}
export const browserModules: Modules = {};
/**
* Get root element
*/
export function getRoot(): HTMLElement {
return browserModules.root
? browserModules.root
: (document.querySelector('body') as HTMLElement);
}

0
packages/iconify/src/api/index.ts → packages/iconify/src/modules/api.ts
View File

2
packages/iconify/src/element.ts → packages/iconify/src/modules/element.ts
View File

@ -1,6 +1,6 @@
import { IconifyIconName } from '@iconify/core/lib/icon/name';
import { IconifyIconCustomisations } from '@iconify/core/lib/customisations';
import { IconifyFinder } from './interfaces/finder';
import { IconifyFinder } from '../finders/interface';
/**
* Icon status

2
packages/iconify/src/finder.ts → packages/iconify/src/modules/finder.ts
View File

@ -9,7 +9,7 @@ import {
validateIcon,
} from '@iconify/core/lib/icon/name';
import { IconifyIconCustomisations } from '@iconify/core/lib/customisations';
import { IconifyFinder } from './interfaces/finder';
import { IconifyFinder } from '../finders/interface';
/**
* List of modules

126
packages/iconify/src/observer/observer.ts → packages/iconify/src/modules/observer.ts
View File

@ -1,12 +1,16 @@
import { elementFinderProperty, IconifyElement } from '../element';
import { ObserverCallback, Observer } from '../interfaces/observer';
import { getRoot } from '../modules';
import { elementFinderProperty, IconifyElement } from './element';
import { getRoot } from './root';
/**
* MutationObserver instance, null until DOM is ready
*/
let instance: MutationObserver | null = null;
/**
* Observer callback function
*/
export type ObserverCallback = (root: HTMLElement) => void;
/**
* Callback
*/
@ -110,68 +114,68 @@ interface OldIEElement extends HTMLElement {
/**
* Export module
*/
export const observer: Observer = {
/**
* Start observer when DOM is ready
*/
init: (cb: ObserverCallback): void => {
callback = cb;
/**
* Start observer when DOM is ready
*/
export function initObserver(cb: ObserverCallback): void {
callback = cb;
if (instance && !paused) {
// Restart observer
instance.disconnect();
observe();
return;
}
setTimeout(() => {
const doc = document;
if (
doc.readyState === 'complete' ||
(doc.readyState !== 'loading' &&
!(doc.documentElement as OldIEElement).doScroll)
) {
startObserver();
} else {
doc.addEventListener('DOMContentLoaded', startObserver);
window.addEventListener('load', startObserver);
}
});
},
/**
* Pause observer
*/
pause: (): void => {
paused++;
if (paused > 1 || instance === null) {
return;
}
// Check pending records, stop observer
checkMutations(instance.takeRecords());
if (instance && !paused) {
// Restart observer
instance.disconnect();
},
observe();
return;
}
/**
* Resume observer
*/
resume: (): void => {
if (!paused) {
return;
setTimeout(() => {
const doc = document;
if (
doc.readyState === 'complete' ||
(doc.readyState !== 'loading' &&
!(doc.documentElement as OldIEElement).doScroll)
) {
startObserver();
} else {
doc.addEventListener('DOMContentLoaded', startObserver);
window.addEventListener('load', startObserver);
}
paused--;
});
}
if (!paused && instance) {
observe();
if (scanPending) {
queueScan();
}
/**
* Pause observer
*/
export function pauseObserver(): void {
paused++;
if (paused > 1 || instance === null) {
return;
}
// Check pending records, stop observer
checkMutations(instance.takeRecords());
instance.disconnect();
}
/**
* Resume observer
*/
export function resumeObserver(): void {
if (!paused) {
return;
}
paused--;
if (!paused && instance) {
observe();
if (scanPending) {
queueScan();
}
},
}
}
/**
* Check if observer is paused
*/
isPaused: (): boolean => paused > 0,
};
/**
* Check if observer is paused
*/
export function isObserverPaused(): boolean {
return paused > 0;
}

4
packages/iconify/src/renderer/render.ts → packages/iconify/src/modules/render.ts
View File

@ -5,13 +5,13 @@ import {
} from '@iconify/core/lib/customisations';
import { iconToSVG } from '@iconify/core/lib/builder';
import { replaceIDs } from '@iconify/core/lib/builder/ids';
import { PlaceholderElement } from '../finder';
import { PlaceholderElement } from './finder';
import {
IconifyElement,
IconifyElementData,
elementDataProperty,
elementFinderProperty,
} from '../element';
} from './element';
/**
* Replace element with SVG

16
packages/iconify/src/modules/root.ts Normal file
View File

@ -0,0 +1,16 @@
// Root element
let root: HTMLElement;
/**
* Get root element
*/
export function getRoot(): HTMLElement {
return root ? root : (document.querySelector('body') as HTMLElement);
}
/**
* Set root element
*/
export function setRoot(node: HTMLElement): void {
root = node;
}

17
packages/iconify/src/scanner/scan.ts → packages/iconify/src/modules/scanner.ts
View File

@ -2,10 +2,11 @@ import { IconifyIconName } from '@iconify/core/lib/icon/name';
import { getStorage, getIcon } from '@iconify/core/lib/storage';
import { coreModules } from '@iconify/core/lib/modules';
import { FullIconifyIcon } from '@iconify/core/lib/icon';
import { findPlaceholders } from '../finder';
import { browserModules, getRoot } from '../modules';
import { IconifyElementData, elementDataProperty } from '../element';
import { renderIcon } from '../renderer/render';
import { findPlaceholders } from './finder';
import { IconifyElementData, elementDataProperty } from './element';
import { renderIcon } from './render';
import { pauseObserver, resumeObserver } from './observer';
import { getRoot } from './root';
/**
* Flag to avoid scanning DOM too often
@ -93,8 +94,8 @@ export function scanDOM(root?: HTMLElement): void {
const storage = getStorage(provider, prefix);
if (storage.icons[name] !== void 0) {
// Icon exists - replace placeholder
if (browserModules.observer && !paused) {
browserModules.observer.pause();
if (!paused) {
pauseObserver();
paused = true;
}
@ -169,7 +170,7 @@ export function scanDOM(root?: HTMLElement): void {
});
}
if (browserModules.observer && paused) {
browserModules.observer.resume();
if (paused) {
resumeObserver();
}
}

14
packages/iconify/src/observer/index.ts
View File

@ -1,14 +0,0 @@
/**
* Iconify interface
*/
export interface IconifyObserver {
/**
* Pause DOM observer
*/
pauseObserver: () => void;
/**
* Resume DOM observer
*/
resumeObserver: () => void;
}

33
packages/iconify/src/renderer/index.ts
View File

@ -1,33 +0,0 @@
import { IconifyIconCustomisations } from '@iconify/core/lib/customisations';
import { IconifyIconBuildResult } from '@iconify/core/lib/builder';
/**
* Iconify interface
*/
export interface IconifyRenderer {
/**
* Render icons
*/
renderSVG: (
name: string,
customisations: IconifyIconCustomisations
) => SVGElement | null;
renderHTML: (
name: string,
customisations: IconifyIconCustomisations
) => string | null;
/**
* Get icon data
*/
renderIcon: (
name: string,
customisations: IconifyIconCustomisations
) => IconifyIconBuildResult | null;
/**
* Replace IDs in icon body, should be used when parsing buildIcon() result
*/
replaceIDs: (body: string) => string;
}

14
packages/iconify/src/scanner/index.ts
View File

@ -1,14 +0,0 @@
/**
* Iconify interface
*/
export interface IconifyScanner {
/**
* Scan DOM
*/
scanDOM: (root?: HTMLElement) => void;
/**
* Set root node
*/
setRoot: (root: HTMLElement) => void;
}