mirror of
https://github.com/iconify/iconify.git
synced 2025-01-07 15:44:05 +00:00
Add demo files for SVG framework, preload icons from IconifyPreload
This commit is contained in:
Vjacheslav Trushkin
parent
a67010f6b7
commit
ff7552abda
@ -91,7 +91,8 @@ function loadedNewIcons(provider: string, prefix: string): void {
|
|||||||
function loadNewIcons(provider: string, prefix: string, icons: string[]): void {
|
function loadNewIcons(provider: string, prefix: string, icons: string[]): void {
|
||||||
function err(): void {
|
function err(): void {
|
||||||
console.error(
|
console.error(
|
||||||
'Unable to retrieve icons for prefix "' +
|
'Unable to retrieve icons for "' +
|
||||||
|
(provider === '' ? '' : '@' + provider + ':') +
|
||||||
prefix +
|
prefix +
|
||||||
'" because API is not configured properly.'
|
'" because API is not configured properly.'
|
||||||
);
|
);
|
||||||
|
|||||||
156
packages/iconify/demo/loading-icons.html
Normal file
156
packages/iconify/demo/loading-icons.html
Normal 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</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.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:
|
||||||
|
<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>
|
||||||
72
packages/iconify/demo/providers.html
Normal file
72
packages/iconify/demo/providers.html
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Iconify Demo: Providers</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;
|
||||||
|
}
|
||||||
|
p:nth-child(2n) {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
IconifyProviders = {
|
||||||
|
fake1: {
|
||||||
|
// correct syntax
|
||||||
|
resources: ['https://api.iconify.design'],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script src="../dist/iconify.min.js"></script>
|
||||||
|
<script>
|
||||||
|
Iconify.addAPIProvider('fake2', {
|
||||||
|
// string instead of array, but script should handle it
|
||||||
|
resources: 'https://api.iconify.design',
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>
|
||||||
|
This is a simple HTML page with few icons.<br />
|
||||||
|
Successful icons should look identical, though loaded separately
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
No provider:
|
||||||
|
<span class="iconify" data-icon="bi:house-door"></span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
No provider:
|
||||||
|
<span class="iconify" data-icon="@:bi:house-door"></span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Custom provider 1 (3 icons):
|
||||||
|
<span class="iconify" data-icon="@fake1:bi:house-door"></span>
|
||||||
|
<span class="iconify" data-icon="fake1:bi:house-door"></span>
|
||||||
|
<span class="iconify" data-icon="@fake1:bi-house-door"></span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Custom provider 2 (1 icon):
|
||||||
|
<span class="iconify" data-icon="@fake2:bi:house-door"></span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Invalid provider (0 icons):
|
||||||
|
<span class="iconify" data-icon="@fake3:bi:house-door"></span>
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
119
packages/iconify/demo/usage.html
Normal file
119
packages/iconify/demo/usage.html
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Iconify Demo: Usage</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;
|
||||||
|
}
|
||||||
|
p:nth-child(2n) {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="../dist/iconify.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>This is a simple HTML page with few icons.</p>
|
||||||
|
<p>
|
||||||
|
Icon that behaves like an image:
|
||||||
|
<span class="iconify" data-icon="bi:house-door"></span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Icon that behaves like an glyph (aligned to bottom of this text):
|
||||||
|
<span class="iconify-inline" data-icon="bi:house-door"></span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Changing icon color:
|
||||||
|
<span
|
||||||
|
class="iconify-inline"
|
||||||
|
style="color: red;"
|
||||||
|
data-icon="bi:house-door"
|
||||||
|
></span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Big icon (showing various ways to do it):
|
||||||
|
<span
|
||||||
|
class="iconify-inline"
|
||||||
|
data-icon="bi:person-lines-fill"
|
||||||
|
style="font-size: 2em;"
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
class="iconify-inline"
|
||||||
|
data-icon="bi:person-lines-fill"
|
||||||
|
data-height="2em"
|
||||||
|
></span>
|
||||||
|
<br />
|
||||||
|
Icons above should be aligned differently because they have
|
||||||
|
different font-size. Vertical alignment is relative to font size.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Big icon (showing various ways to do it):
|
||||||
|
<span
|
||||||
|
class="iconify"
|
||||||
|
data-icon="bi:person-lines-fill"
|
||||||
|
style="font-size: 2em;"
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
class="iconify"
|
||||||
|
data-icon="bi:person-lines-fill"
|
||||||
|
data-height="2em"
|
||||||
|
></span>
|
||||||
|
<br />
|
||||||
|
Icons above should be aligned identically because they are not using
|
||||||
|
inline mode.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Rotation:
|
||||||
|
<span class="iconify-inline" data-icon="bi:image"></span>
|
||||||
|
<span
|
||||||
|
class="iconify-inline"
|
||||||
|
data-icon="bi:image"
|
||||||
|
data-rotate="1"
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
class="iconify-inline"
|
||||||
|
data-icon="bi:image"
|
||||||
|
data-rotate="180deg"
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
class="iconify-inline"
|
||||||
|
data-icon="bi:image"
|
||||||
|
data-rotate="75%"
|
||||||
|
></span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Flip:
|
||||||
|
<span class="iconify-inline" data-icon="bi:droplet-half"></span>
|
||||||
|
<span
|
||||||
|
class="iconify-inline"
|
||||||
|
data-icon="bi:droplet-half"
|
||||||
|
data-flip="horizontal"
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
class="iconify-inline"
|
||||||
|
data-icon="bi:droplet-half"
|
||||||
|
data-flip="vertical"
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
class="iconify-inline"
|
||||||
|
data-icon="bi:droplet-half"
|
||||||
|
data-flip="horizontal,vertical"
|
||||||
|
></span>
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -272,6 +272,30 @@ function generateIcon(
|
|||||||
) as unknown) as SVGElement | string | null;
|
) 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);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Global variable
|
* Global variable
|
||||||
*/
|
*/
|
||||||
@ -358,26 +382,7 @@ const Iconify: IconifyGlobal = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// Add icon set
|
// Add icon set
|
||||||
addCollection: (data, provider?: string) => {
|
addCollection: addCollection,
|
||||||
if (typeof provider !== 'string') {
|
|
||||||
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);
|
|
||||||
},
|
|
||||||
|
|
||||||
// Pause observer
|
// Pause observer
|
||||||
pauseObserver: observer.pause,
|
pauseObserver: observer.pause,
|
||||||
@ -437,6 +442,39 @@ setAPIModule('', {
|
|||||||
prepare: prepareQuery,
|
prepare: prepareQuery,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 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"
|
// Set API from global "IconifyProviders"
|
||||||
interface WindowWithIconifyProviders {
|
interface WindowWithIconifyProviders {
|
||||||
IconifyProviders: Record<string, PartialIconifyAPIConfig>;
|
IconifyProviders: Record<string, PartialIconifyAPIConfig>;
|
||||||
@ -462,7 +500,7 @@ if (
|
|||||||
if (!setAPIConfig(key, value)) {
|
if (!setAPIConfig(key, value)) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (e) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user