mirror of
https://github.com/iconify/iconify.git
synced 2024-11-09 23:00:56 +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 err(): void {
|
||||
console.error(
|
||||
'Unable to retrieve icons for prefix "' +
|
||||
'Unable to retrieve icons for "' +
|
||||
(provider === '' ? '' : '@' + provider + ':') +
|
||||
prefix +
|
||||
'" 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
@ -358,26 +382,7 @@ const Iconify: IconifyGlobal = {
|
||||
},
|
||||
|
||||
// Add icon set
|
||||
addCollection: (data, provider?: string) => {
|
||||
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);
|
||||
},
|
||||
addCollection: addCollection,
|
||||
|
||||
// Pause observer
|
||||
pauseObserver: observer.pause,
|
||||
@ -437,6 +442,39 @@ setAPIModule('', {
|
||||
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"
|
||||
interface WindowWithIconifyProviders {
|
||||
IconifyProviders: Record<string, PartialIconifyAPIConfig>;
|
||||
@ -462,7 +500,7 @@ if (
|
||||
if (!setAPIConfig(key, value)) {
|
||||
console.error(err);
|
||||
}
|
||||
} catch (err) {
|
||||
} catch (e) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user