@siemens/ix-icons 0.0.0-20240515161342 → 0.0.0-20240729073852
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/{icon-8d6a19b5.js → icon-ee6021fa.js} +13 -65
- package/dist/cjs/icon-ee6021fa.js.map +1 -0
- package/dist/cjs/{index-af0541e0.js → index-8f585802.js} +3 -1
- package/dist/cjs/index-8f585802.js.map +1 -0
- package/dist/cjs/index.cjs.js +1681 -2
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/ix-icon.cjs.entry.js +2 -2
- package/dist/cjs/ix-icons.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/icon/icons.js +135 -19
- package/dist/collection/components/icon/icons.js.map +1 -1
- package/dist/collection/components/icon/meta-tag.js +0 -25
- package/dist/collection/components/icon/meta-tag.js.map +1 -1
- package/dist/collection/components/icon/resolveIcon.js +10 -40
- package/dist/collection/components/icon/resolveIcon.js.map +1 -1
- package/dist/collection/components/icon/test/resolveIcon.spec.js +38 -10
- package/dist/collection/components/icon/test/resolveIcon.spec.js.map +1 -1
- package/dist/collection/index.js +2 -0
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/legacy-support.js +45 -0
- package/dist/collection/legacy-support.js.map +1 -0
- package/dist/components/icon.js +9 -64
- package/dist/components/icon.js.map +1 -1
- package/dist/components/index.js +1683 -0
- package/dist/components/index.js.map +1 -1
- package/dist/esm/{icon-9458edad.js → icon-76ecbfbf.js} +11 -66
- package/dist/esm/icon-76ecbfbf.js.map +1 -0
- package/dist/esm/{index-8088fea1.js → index-d1072d3f.js} +3 -2
- package/dist/esm/index-d1072d3f.js.map +1 -0
- package/dist/esm/index.js +1685 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/ix-icon.entry.js +2 -2
- package/dist/esm/ix-icons.js +2 -2
- package/dist/esm/loader.js +2 -2
- package/dist/ix-icons/index.esm.js +1 -1
- package/dist/ix-icons/index.esm.js.map +1 -1
- package/dist/ix-icons/ix-icons.esm.js +1 -1
- package/dist/ix-icons/p-05455ad0.js +3 -0
- package/dist/ix-icons/p-05455ad0.js.map +1 -0
- package/dist/ix-icons/p-20e57a64.entry.js +2 -0
- package/dist/ix-icons/p-31deceec.js +2 -0
- package/dist/ix-icons/p-31deceec.js.map +1 -0
- package/dist/sample.json +116 -0
- package/dist/types/components/icon/icons.d.ts +136 -20
- package/dist/types/components/icon/meta-tag.d.ts +0 -6
- package/dist/types/components/icon/resolveIcon.d.ts +1 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/legacy-support.d.ts +1 -0
- package/icons/index.d.ts +116 -0
- package/icons/index.js +135 -19
- package/icons/index.mjs +135 -19
- package/icons/package.json +1 -1
- package/package.json +1 -1
- package/svg/add-filter-filled.svg +1 -0
- package/svg/add-filter.svg +1 -0
- package/svg/add-selection.svg +1 -0
- package/svg/add-shield-half.svg +1 -0
- package/svg/alarm-clock-cancelled.svg +1 -0
- package/svg/alarm-clock-success.svg +1 -0
- package/svg/battery-bolt.svg +1 -0
- package/svg/battery-upright-bolt.svg +1 -0
- package/svg/battery-upright-check.svg +1 -0
- package/svg/battery-upright-empty.svg +1 -0
- package/svg/battery-upright-exclamation.svg +1 -0
- package/svg/battery-upright-full-check.svg +1 -0
- package/svg/battery-upright-full.svg +1 -0
- package/svg/battery-upright-half.svg +1 -0
- package/svg/battery-upright-low.svg +1 -0
- package/svg/battery-upright-quarter.svg +1 -0
- package/svg/battery-upright-question.svg +1 -0
- package/svg/battery-upright-slash.svg +1 -0
- package/svg/battery-upright-three-quarter.svg +1 -0
- package/svg/battery-upright-xmark.svg +1 -0
- package/svg/box-closed.svg +1 -0
- package/svg/box-ipc-fail.svg +1 -0
- package/svg/box-ipc-question.svg +1 -0
- package/svg/box-ipc-success.svg +1 -0
- package/svg/box-ipc.svg +1 -0
- package/svg/box-open.svg +1 -0
- package/svg/bug-filled.svg +1 -0
- package/svg/bug.svg +1 -0
- package/svg/calculator.svg +1 -0
- package/svg/chevron-down-bar-small.svg +1 -0
- package/svg/chevron-down-bar.svg +1 -0
- package/svg/chevron-down.svg +1 -1
- package/svg/chevron-left-bar-small.svg +1 -0
- package/svg/chevron-left-bar.svg +1 -0
- package/svg/chevron-right-bar-small.svg +1 -0
- package/svg/chevron-right-bar.svg +1 -0
- package/svg/chevron-up-bar-small.svg +1 -0
- package/svg/chevron-up-bar.svg +1 -0
- package/svg/clear-filter-filled.svg +1 -1
- package/svg/clear-filter.svg +1 -1
- package/svg/cloud-fail-filled.svg +1 -1
- package/svg/cloud-fail.svg +1 -1
- package/svg/cloud-success-filled.svg +1 -1
- package/svg/cloud-success.svg +1 -1
- package/svg/compare.svg +1 -0
- package/svg/copy-filled.svg +1 -0
- package/svg/counter.svg +1 -0
- package/svg/crosshairs-filled.svg +1 -0
- package/svg/crosshairs.svg +1 -0
- package/svg/customer-filled.svg +1 -0
- package/svg/customer.svg +1 -0
- package/svg/cut-filled.svg +1 -0
- package/svg/device-driver.svg +1 -0
- package/svg/device-fan.svg +1 -0
- package/svg/disk-pen.svg +1 -1
- package/svg/drag-and-drop.svg +1 -0
- package/svg/drag-gripper.svg +1 -0
- package/svg/drop-zone.svg +1 -0
- package/svg/duplicate-filled.svg +1 -0
- package/svg/edit-document-filled.svg +1 -0
- package/svg/edit-document.svg +1 -0
- package/svg/firmware.svg +1 -0
- package/svg/flashing.svg +1 -0
- package/svg/handshake.svg +1 -0
- package/svg/hard-disk-drive.svg +1 -0
- package/svg/heading.svg +1 -0
- package/svg/health-filled.svg +1 -1
- package/svg/health.svg +1 -1
- package/svg/heart-filled.svg +1 -1
- package/svg/heart.svg +1 -1
- package/svg/height.svg +1 -0
- package/svg/hourglass-empty.svg +1 -0
- package/svg/hourglass-end.svg +1 -0
- package/svg/hourglass-filled.svg +1 -0
- package/svg/hourglass-start.svg +1 -0
- package/svg/ipcs.svg +1 -0
- package/svg/join.svg +1 -0
- package/svg/link-break.svg +1 -0
- package/svg/link-diagonal.svg +1 -0
- package/svg/list-sorted-alt.svg +1 -0
- package/svg/list-sorted.svg +1 -0
- package/svg/move.svg +1 -0
- package/svg/operate-plant.svg +1 -1
- package/svg/operating-system.svg +1 -0
- package/svg/panel-ipc-fail.svg +1 -0
- package/svg/panel-ipc-question.svg +1 -0
- package/svg/panel-ipc-success.svg +1 -0
- package/svg/panel-ipc.svg +1 -0
- package/svg/power-supply.svg +1 -0
- package/svg/quote.svg +1 -0
- package/svg/rack-ipc-fail.svg +1 -0
- package/svg/rack-ipc-question.svg +1 -0
- package/svg/rack-ipc-success.svg +1 -0
- package/svg/rack-ipc.svg +1 -0
- package/svg/refresh-exclamation.svg +1 -0
- package/svg/refresh-settings.svg +1 -0
- package/svg/reorder.svg +1 -0
- package/svg/replace.svg +1 -1
- package/svg/runtime-settings.svg +1 -0
- package/svg/sd-card-filled.svg +1 -0
- package/svg/sd-card-micro-filled.svg +1 -0
- package/svg/sd-card-micro.svg +1 -0
- package/svg/sd-card.svg +1 -0
- package/svg/separator-line.svg +1 -0
- package/svg/shield-broken-filled.svg +1 -0
- package/svg/shield-broken.svg +1 -0
- package/svg/shield-check-filled.svg +1 -0
- package/svg/shield-check.svg +1 -0
- package/svg/shield-filled.svg +1 -0
- package/svg/shield-half.svg +1 -0
- package/svg/shield.svg +1 -0
- package/svg/solid-state-drive.svg +1 -0
- package/svg/sort-alt.svg +1 -0
- package/svg/sort.svg +1 -1
- package/svg/split.svg +1 -0
- package/svg/sword-swing.svg +1 -0
- package/svg/text-bold.svg +1 -0
- package/svg/text-italic.svg +1 -0
- package/svg/text-strike-through.svg +1 -0
- package/svg/text-underline.svg +1 -0
- package/svg/thermometer.svg +1 -0
- package/svg/trend-downward-circle.svg +1 -0
- package/svg/trend-sideways-circle.svg +1 -0
- package/svg/trend-upward-circle.svg +1 -0
- package/svg/trophy-filled.svg +1 -0
- package/svg/trophy.svg +1 -0
- package/svg/usb-drive.svg +1 -0
- package/svg/user-check-filled.svg +1 -1
- package/svg/user-check.svg +1 -1
- package/svg/user-fail-filled.svg +1 -1
- package/svg/user-fail.svg +1 -1
- package/svg/user-success-filled.svg +1 -0
- package/svg/user-success.svg +1 -0
- package/svg/width.svg +1 -0
- package/svg/zone.svg +1 -0
- package/dist/cjs/icon-8d6a19b5.js.map +0 -1
- package/dist/cjs/icons-0dd6f96e.js +0 -1405
- package/dist/cjs/icons-0dd6f96e.js.map +0 -1
- package/dist/cjs/index-af0541e0.js.map +0 -1
- package/dist/components/icons.js +0 -705
- package/dist/components/icons.js.map +0 -1
- package/dist/esm/icon-9458edad.js.map +0 -1
- package/dist/esm/icons-84dc9236.js +0 -705
- package/dist/esm/icons-84dc9236.js.map +0 -1
- package/dist/esm/index-8088fea1.js.map +0 -1
- package/dist/ix-icons/p-1dac0290.js +0 -2
- package/dist/ix-icons/p-1dac0290.js.map +0 -1
- package/dist/ix-icons/p-51684ec4.js +0 -2
- package/dist/ix-icons/p-51684ec4.js.map +0 -1
- package/dist/ix-icons/p-efdd4090.js +0 -3
- package/dist/ix-icons/p-efdd4090.js.map +0 -1
- package/dist/ix-icons/p-f748c4c1.entry.js +0 -2
- /package/dist/ix-icons/{p-f748c4c1.entry.js.map → p-20e57a64.entry.js.map} +0 -0
@@ -1,16 +1,6 @@
|
|
1
1
|
/*
|
2
2
|
* COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED.
|
3
3
|
*/
|
4
|
-
function getV3PreviewMetaElement() {
|
5
|
-
return document.querySelector("meta[name='ix-icons:v3-preview']");
|
6
|
-
}
|
7
|
-
function getV3PreviewMetaContent() {
|
8
|
-
const v3PreviewMetaElement = getV3PreviewMetaElement();
|
9
|
-
if (v3PreviewMetaElement) {
|
10
|
-
return v3PreviewMetaElement.getAttribute('content').split(';');
|
11
|
-
}
|
12
|
-
return null;
|
13
|
-
}
|
14
4
|
/**
|
15
5
|
* Provide custom SVG path for icons
|
16
6
|
*
|
@@ -24,19 +14,4 @@ export function getCustomAssetUrl() {
|
|
24
14
|
}
|
25
15
|
return false;
|
26
16
|
}
|
27
|
-
/**
|
28
|
-
* Enable v3 preview features
|
29
|
-
*
|
30
|
-
* <meta name="ix-icons:v3-preview" content="svg-path-loading;" />
|
31
|
-
*/
|
32
|
-
export function isV3PreviewEnabled() {
|
33
|
-
const features = getV3PreviewMetaContent();
|
34
|
-
if (!features) {
|
35
|
-
return false;
|
36
|
-
}
|
37
|
-
if (features.includes('svg-path-loading')) {
|
38
|
-
return true;
|
39
|
-
}
|
40
|
-
return false;
|
41
|
-
}
|
42
17
|
//# sourceMappingURL=meta-tag.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"meta-tag.js","sourceRoot":"","sources":["../../../src/components/icon/meta-tag.ts"],"names":[],"mappings":"AAAA;;GAEG;
|
1
|
+
{"version":3,"file":"meta-tag.js","sourceRoot":"","sources":["../../../src/components/icon/meta-tag.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH;;;;GAIG;AACH,MAAM,UAAU,iBAAiB;IAC/B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IACvE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,IAAI,GAAG,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QAC/C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/*\n * COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED.\n */\n/**\n * Provide custom SVG path for icons\n *\n * <meta name=\"ix-icons:path\" content=\"/build/svg\" />\n */\nexport function getCustomAssetUrl() {\n const assetPath = document.querySelector(\"meta[name='ix-icons:path']\");\n if (assetPath) {\n const path = assetPath.getAttribute('content');\n return path;\n }\n\n return false;\n}\n"]}
|
@@ -7,29 +7,10 @@
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
8
8
|
*/
|
9
9
|
import { getAssetPath } from "@stencil/core";
|
10
|
-
import { getCustomAssetUrl
|
10
|
+
import { getCustomAssetUrl } from "./meta-tag";
|
11
11
|
let fetchCache;
|
12
12
|
const requests = new Map();
|
13
13
|
let parser = null;
|
14
|
-
function toCamelCase(value) {
|
15
|
-
value = value.replace(/[\(\)\[\]\{\}\=\?\!\.\:,\-_\+\\\"#~\/]/g, ' ');
|
16
|
-
let returnValue = '';
|
17
|
-
let makeNextUppercase = true;
|
18
|
-
value = value.toLowerCase();
|
19
|
-
for (let i = 0; value.length > i; i++) {
|
20
|
-
let c = value.charAt(i);
|
21
|
-
if (c.match(/^\s+$/g) || c.match(/[\(\)\[\]\{\}\\\/]/g)) {
|
22
|
-
makeNextUppercase = true;
|
23
|
-
}
|
24
|
-
else if (makeNextUppercase) {
|
25
|
-
c = c.toUpperCase();
|
26
|
-
makeNextUppercase = false;
|
27
|
-
}
|
28
|
-
returnValue += c;
|
29
|
-
}
|
30
|
-
const normalized = returnValue.replace(/\s+/g, '');
|
31
|
-
return normalized.charAt(0).toUpperCase() + normalized.slice(1);
|
32
|
-
}
|
33
14
|
export const getIconCacheMap = () => {
|
34
15
|
if (typeof window === 'undefined') {
|
35
16
|
return new Map();
|
@@ -65,14 +46,13 @@ export function parseSVGDataContent(content) {
|
|
65
46
|
return svgElement.outerHTML;
|
66
47
|
}
|
67
48
|
async function fetchSVG(url) {
|
68
|
-
const request = requests.get(url);
|
69
|
-
if (request) {
|
70
|
-
return request;
|
71
|
-
}
|
72
49
|
const cache = getIconCacheMap();
|
73
50
|
if (cache.has(url)) {
|
74
51
|
return cache.get(url);
|
75
52
|
}
|
53
|
+
if (requests.has(url)) {
|
54
|
+
return requests.get(url);
|
55
|
+
}
|
76
56
|
const fetching = fetch(url).then(async (response) => {
|
77
57
|
const responseText = await response.text();
|
78
58
|
if (!response.ok) {
|
@@ -90,19 +70,13 @@ const urlRegex = /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:www\.)?(?:\S+\.\
|
|
90
70
|
function isValidUrl(url) {
|
91
71
|
return urlRegex.test(url);
|
92
72
|
}
|
93
|
-
function getAssetUrl(name) {
|
73
|
+
export function getAssetUrl(name) {
|
94
74
|
const customAssetUrl = getCustomAssetUrl();
|
95
75
|
if (customAssetUrl) {
|
96
76
|
return `${customAssetUrl}/${name}.svg`;
|
97
77
|
}
|
98
78
|
return getAssetPath(`svg/${name}.svg`);
|
99
79
|
}
|
100
|
-
async function getESMIcon(name) {
|
101
|
-
const esmIcon = await import('./icons');
|
102
|
-
let iconName = toCamelCase(name);
|
103
|
-
iconName = `icon${iconName}`;
|
104
|
-
return parseSVGDataContent(esmIcon[iconName]);
|
105
|
-
}
|
106
80
|
export async function resolveIcon(iconName) {
|
107
81
|
if (!iconName) {
|
108
82
|
throw Error('No icon name provided');
|
@@ -118,15 +92,11 @@ export async function resolveIcon(iconName) {
|
|
118
92
|
throw error;
|
119
93
|
}
|
120
94
|
}
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
catch (error) {
|
127
|
-
throw Error('Cannot resolve any icon');
|
128
|
-
}
|
95
|
+
try {
|
96
|
+
return fetchSVG(getAssetUrl(iconName));
|
97
|
+
}
|
98
|
+
catch (error) {
|
99
|
+
throw Error('Cannot resolve any icon');
|
129
100
|
}
|
130
|
-
return getESMIcon(iconName);
|
131
101
|
}
|
132
102
|
//# sourceMappingURL=resolveIcon.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"resolveIcon.js","sourceRoot":"","sources":["../../../src/components/icon/resolveIcon.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,
|
1
|
+
{"version":3,"file":"resolveIcon.js","sourceRoot":"","sources":["../../../src/components/icon/resolveIcon.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { getAssetPath } from '@stencil/core';\nimport { getCustomAssetUrl } from './meta-tag';\n\ndeclare global {\n interface Window {\n IxIcons: any;\n }\n}\n\nlet fetchCache: Map<string, string>;\nconst requests = new Map<string, Promise<string>>();\nlet parser = null;\n\nexport const getIconCacheMap = (): Map<string, string> => {\n if (typeof window === 'undefined') {\n return new Map();\n }\n\n if (!fetchCache) {\n window.IxIcons = window.IxIcons || {};\n fetchCache = window.IxIcons.map = window.IxIcons.map || new Map();\n }\n return fetchCache;\n};\n\nexport const isSvgDataUrl = (url: string) => {\n if (!url) {\n return false;\n }\n\n if (typeof url !== 'string') {\n return false;\n }\n\n return url.startsWith('data:image/svg+xml');\n};\n\nexport function parseSVGDataContent(content: string) {\n if (typeof window['DOMParser'] === 'undefined') {\n console.warn('DOMParser not supported by your browser.');\n return;\n }\n\n if (parser === null) {\n parser = new window['DOMParser']();\n }\n\n const svgDocument = parser.parseFromString(content, 'text/html');\n const svgElement = svgDocument.querySelector('svg') as HTMLElement;\n\n if (!svgElement) {\n throw Error('No valid svg data provided');\n }\n\n return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n const cache = getIconCacheMap();\n\n if (cache.has(url)) {\n return cache.get(url);\n }\n\n if (requests.has(url)) {\n return requests.get(url);\n }\n\n const fetching = fetch(url).then(async response => {\n const responseText = await response.text();\n\n if (!response.ok) {\n console.error(responseText);\n throw Error(responseText);\n }\n\n const svgContent = parseSVGDataContent(responseText);\n cache.set(url, svgContent);\n\n return svgContent;\n });\n\n requests.set(url, fetching);\n return fetching;\n}\nconst urlRegex = /^(?:(?:https?|ftp):\\/\\/)?(?:\\S+(?::\\S*)?@)?(?:www\\.)?(?:\\S+\\.\\S+)(?:\\S*)$/i;\n\nfunction isValidUrl(url: string) {\n return urlRegex.test(url);\n}\n\nexport function getAssetUrl(name: string) {\n const customAssetUrl = getCustomAssetUrl();\n if (customAssetUrl) {\n return `${customAssetUrl}/${name}.svg`;\n }\n\n return getAssetPath(`svg/${name}.svg`);\n}\n\nexport async function resolveIcon(iconName: string) {\n if (!iconName) {\n throw Error('No icon name provided');\n }\n\n if (isSvgDataUrl(iconName)) {\n return parseSVGDataContent(iconName);\n }\n\n if (isValidUrl(iconName)) {\n try {\n return fetchSVG(iconName);\n } catch (error) {\n throw error;\n }\n }\n\n try {\n return fetchSVG(getAssetUrl(iconName));\n } catch (error) {\n throw Error('Cannot resolve any icon');\n }\n}\n"]}
|
@@ -1,8 +1,9 @@
|
|
1
1
|
/*
|
2
2
|
* COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
|
3
3
|
*/
|
4
|
-
import
|
5
|
-
import {
|
4
|
+
import { preloadIconMap } from "../../../legacy-support";
|
5
|
+
import { iconStar } from "../icons";
|
6
|
+
import { resolveIcon, getIconCacheMap, getAssetUrl, parseSVGDataContent } from "../resolveIcon";
|
6
7
|
const exampleSvg = `
|
7
8
|
<?xml version="1.0" encoding="UTF-8"?>
|
8
9
|
<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
@@ -26,6 +27,12 @@ jest.mock('../icons', () => ({
|
|
26
27
|
}));
|
27
28
|
let fetch = (global.fetch = jest.fn((url) => {
|
28
29
|
console.log(url);
|
30
|
+
if (url === '/svg/star.svg') {
|
31
|
+
return Promise.resolve({
|
32
|
+
text: () => Promise.resolve(iconStar),
|
33
|
+
ok: true,
|
34
|
+
});
|
35
|
+
}
|
29
36
|
if (url === '/svg/bulb.svg') {
|
30
37
|
return Promise.resolve({
|
31
38
|
text: () => Promise.resolve(exampleSvg),
|
@@ -50,14 +57,7 @@ describe('resolve icon', () => {
|
|
50
57
|
fetch.mockClear();
|
51
58
|
});
|
52
59
|
it('should resolve svg from name', async () => {
|
53
|
-
const
|
54
|
-
const data = await resolveIcon(icon);
|
55
|
-
expect(data).toBe(`<svg width=\"512px\" height=\"512px\" viewBox=\"0 0 512 512\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"> <title>add</title> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Shape\" fill=\"#000000\" transform=\"translate(65.929697, 65.929697)\"> <polygon points=\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\"></polygon> </g> </g> </svg>`);
|
56
|
-
});
|
57
|
-
it('resolve by v3 preview feature flat', async () => {
|
58
|
-
metaTag.isV3PreviewEnabled = jest.fn(() => true);
|
59
|
-
const icon = 'bulb';
|
60
|
-
const data = await resolveIcon(icon);
|
60
|
+
const data = await resolveIcon('bulb');
|
61
61
|
expect(data).toBe(`<svg width=\"512px\" height=\"512px\" viewBox=\"0 0 512 512\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"> <title>add</title> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Shape\" fill=\"#000000\" transform=\"translate(65.929697, 65.929697)\"> <polygon points=\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\"></polygon> </g> </g> </svg>`);
|
62
62
|
});
|
63
63
|
it('should resolve svg from src', async () => {
|
@@ -69,4 +69,32 @@ describe('resolve icon', () => {
|
|
69
69
|
await expect(resolveIcon(icon)).rejects.toThrow('No valid svg data provided');
|
70
70
|
});
|
71
71
|
});
|
72
|
+
test('preload icon map', async () => {
|
73
|
+
fetch.mockClear();
|
74
|
+
const cacheMap = getIconCacheMap();
|
75
|
+
cacheMap.clear();
|
76
|
+
preloadIconMap();
|
77
|
+
expect(cacheMap.size).toBeGreaterThan(0);
|
78
|
+
const data = await resolveIcon('bulb');
|
79
|
+
expect(cacheMap.size).toBeGreaterThan(0);
|
80
|
+
expect(fetch).not.toHaveBeenCalled();
|
81
|
+
expect(data).toBe('<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Combined-Shape" transform="translate(42.666667, 21.333333)"><path d="M213.333333,85.3333333 C284.025781,85.3333333 341.333333,142.640885 341.333333,213.333333 C341.333333,260.711239 315.5928,302.077122 277.333732,324.208982 L277.333333,405.333333 L256,426.666667 L234.666667,426.666667 C234.666667,438.448741 225.115408,448 213.333333,448 C201.551259,448 192,438.448741 192,426.666667 L192,426.666667 L170.666667,426.666667 L149.333333,405.333333 L149.332954,324.208993 C111.073876,302.077136 85.3333333,260.711248 85.3333333,213.333333 C85.3333333,142.640885 142.640885,85.3333333 213.333333,85.3333333 Z M234.667665,339.563386 C227.72957,340.727434 220.602209,341.333333 213.333333,341.333333 C206.064458,341.333333 198.937097,340.727434 191.999002,339.563386 L192,384 L234.666667,384 L234.667665,339.563386 Z M96.4250122,307.614237 L119.052429,330.241654 L73.7975952,375.496488 L51.1701782,352.869071 L96.4250122,307.614237 Z M330.241654,307.614237 L375.496488,352.869071 L352.869071,375.496488 L307.614237,330.241654 L330.241654,307.614237 Z M213.333333,128 C166.205035,128 128,166.205035 128,213.333333 C128,260.461632 166.205035,298.666667 213.333333,298.666667 C260.461632,298.666667 298.666667,260.461632 298.666667,213.333333 C298.666667,166.205035 260.461632,128 213.333333,128 Z M426.666667,197.333333 L426.666667,229.333333 L362.666667,229.333333 L362.666667,197.333333 L426.666667,197.333333 Z M64,197.333333 L64,229.333333 L3.55271368e-14,229.333333 L3.55271368e-14,197.333333 L64,197.333333 Z M352.869071,51.1701782 L375.496488,73.7975952 L330.241654,119.052429 L307.614237,96.4250122 L352.869071,51.1701782 Z M73.7975952,51.1701782 L119.052429,96.4250122 L96.4250122,119.052429 L51.1701782,73.7975952 L73.7975952,51.1701782 Z M229.333333,-1.0658141e-14 L229.333333,64 L197.333333,64 L197.333333,-1.0658141e-14 L229.333333,-1.0658141e-14 Z"></path></g></g></svg>');
|
82
|
+
});
|
83
|
+
test('fill cache map if not loaded', async () => {
|
84
|
+
fetch.mockClear();
|
85
|
+
const cacheMap = getIconCacheMap();
|
86
|
+
cacheMap.clear();
|
87
|
+
expect(cacheMap.size).toBe(0);
|
88
|
+
const data = await resolveIcon('star');
|
89
|
+
expect(data).toBe(parseSVGDataContent(iconStar));
|
90
|
+
expect(cacheMap.get(getAssetUrl('star'))).toBe(parseSVGDataContent(iconStar));
|
91
|
+
});
|
92
|
+
test('preload custom icon', async () => {
|
93
|
+
fetch.mockClear();
|
94
|
+
const cacheMap = getIconCacheMap();
|
95
|
+
cacheMap.clear();
|
96
|
+
cacheMap.set(getAssetUrl('star'), '<svg>Test</svg>');
|
97
|
+
const data = await resolveIcon('star');
|
98
|
+
expect(data).toBe('<svg>Test</svg>');
|
99
|
+
});
|
72
100
|
//# sourceMappingURL=resolveIcon.spec.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"resolveIcon.spec.js","sourceRoot":"","sources":["../../../../src/components/icon/test/resolveIcon.spec.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,OAAO,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,MAAM,UAAU,GAAG;;;;;;;;;;CAUlB,CAAC;AAEF,MAAM,iBAAiB,GAAG;;;;;CAKzB,CAAC;AAEF,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACzB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC;IAC3B,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAC;AACJ,IAAI,KAAK,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,GAAW,EAAE,EAAE;IAClD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjB,IAAI,GAAG,KAAK,eAAe,EAAE,CAAC;QAC5B,OAAO,OAAO,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC;YACvC,EAAE,EAAE,IAAI;SACT,CAAC,CAAC;IACL,CAAC;IAED,IAAI,GAAG,KAAK,2BAA2B,EAAE,CAAC;QACxC,OAAO,OAAO,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC;YACvC,EAAE,EAAE,IAAI;SACT,CAAC,CAAC;IACL,CAAC;IAED,IAAI,GAAG,KAAK,8BAA8B,EAAE,CAAC;QAC3C,OAAO,OAAO,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC;YAC9C,EAAE,EAAE,IAAI;SACT,CAAC,CAAC;IACL,CAAC;AACH,CAAC,CAAc,CAAC,CAAC;AAEjB,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,UAAU,CAAC,GAAG,EAAE;QACd,KAAK,CAAC,SAAS,EAAE,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,CAAC;QACpB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;QAErC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CACf,iqBAAiqB,CAClqB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QACjD,OAAe,CAAC,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC;QAE1D,MAAM,IAAI,GAAG,MAAM,CAAC;QACpB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;QAErC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CACf,iqBAAiqB,CAClqB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,YAAY,GAAG,MAAM,WAAW,CAAC,2BAA2B,CAAC,CAAC;QAEpE,MAAM,CAAC,YAAY,CAAC,CAAC,OAAO,CAC1B,iqBAAiqB,CAClqB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,IAAI,GAAG,8BAA8B,CAAC;QAE5C,MAAM,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAChF,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/*\n * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.\n */\nimport * as metaTag from './../meta-tag';\nimport { resolveIcon } from '../resolveIcon';\nconst exampleSvg = `\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"512px\" height=\"512px\" viewBox=\"0 0 512 512\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>add</title>\n <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Shape\" fill=\"#000000\" transform=\"translate(65.929697, 65.929697)\">\n <polygon points=\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\"></polygon>\n </g>\n </g>\n</svg>\n`;\n\nconst invalidexampleSvg = `\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<script>\n alert('Test!');\n</script>\n`;\n\njest.mock('../meta-tag');\njest.mock('../icons', () => ({\n iconStar: exampleSvg,\n}));\nlet fetch = (global.fetch = jest.fn((url: string) => {\n console.log(url);\n if (url === '/svg/bulb.svg') {\n return Promise.resolve({\n text: () => Promise.resolve(exampleSvg),\n ok: true,\n });\n }\n\n if (url === 'http://localhost/test.svg') {\n return Promise.resolve({\n text: () => Promise.resolve(exampleSvg),\n ok: true,\n });\n }\n\n if (url === 'http://localhost/invalid.svg') {\n return Promise.resolve({\n text: () => Promise.resolve(invalidexampleSvg),\n ok: true,\n });\n }\n}) as jest.Mock);\n\ndescribe('resolve icon', () => {\n beforeEach(() => {\n fetch.mockClear();\n });\n\n it('should resolve svg from name', async () => {\n const icon = 'star';\n const data = await resolveIcon(icon);\n\n expect(data).toBe(\n `<svg width=\\\"512px\\\" height=\\\"512px\\\" viewBox=\\\"0 0 512 512\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>add</title> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"Shape\\\" fill=\\\"#000000\\\" transform=\\\"translate(65.929697, 65.929697)\\\"> <polygon points=\\\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\\\"></polygon> </g> </g> </svg>`,\n );\n });\n\n it('resolve by v3 preview feature flat', async () => {\n (metaTag as any).isV3PreviewEnabled = jest.fn(() => true);\n\n const icon = 'bulb';\n const data = await resolveIcon(icon);\n\n expect(data).toBe(\n `<svg width=\\\"512px\\\" height=\\\"512px\\\" viewBox=\\\"0 0 512 512\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>add</title> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"Shape\\\" fill=\\\"#000000\\\" transform=\\\"translate(65.929697, 65.929697)\\\"> <polygon points=\\\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\\\"></polygon> </g> </g> </svg>`,\n );\n });\n\n it('should resolve svg from src', async () => {\n const expectedName = await resolveIcon('http://localhost/test.svg');\n\n expect(expectedName).toEqual(\n `<svg width=\\\"512px\\\" height=\\\"512px\\\" viewBox=\\\"0 0 512 512\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>add</title> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"Shape\\\" fill=\\\"#000000\\\" transform=\\\"translate(65.929697, 65.929697)\\\"> <polygon points=\\\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\\\"></polygon> </g> </g> </svg>`,\n );\n });\n\n it('should not resolve invalid svg from src', async () => {\n const icon = 'http://localhost/invalid.svg';\n\n await expect(resolveIcon(icon)).rejects.toThrow('No valid svg data provided');\n });\n});\n"]}
|
1
|
+
{"version":3,"file":"resolveIcon.spec.js","sourceRoot":"","sources":["../../../../src/components/icon/test/resolveIcon.spec.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.\n */\nimport { preloadIconMap } from '../../../legacy-support';\nimport { iconStar } from '../icons';\nimport { resolveIcon, getIconCacheMap, getAssetUrl, parseSVGDataContent } from '../resolveIcon';\nconst exampleSvg = `\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"512px\" height=\"512px\" viewBox=\"0 0 512 512\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>add</title>\n <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Shape\" fill=\"#000000\" transform=\"translate(65.929697, 65.929697)\">\n <polygon points=\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\"></polygon>\n </g>\n </g>\n</svg>\n`;\n\nconst invalidexampleSvg = `\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<script>\n alert('Test!');\n</script>\n`;\n\njest.mock('../meta-tag');\njest.mock('../icons', () => ({\n iconStar: exampleSvg,\n}));\nlet fetch = (global.fetch = jest.fn((url: string) => {\n console.log(url);\n\n if (url === '/svg/star.svg') {\n return Promise.resolve({\n text: () => Promise.resolve(iconStar),\n ok: true,\n });\n }\n\n if (url === '/svg/bulb.svg') {\n return Promise.resolve({\n text: () => Promise.resolve(exampleSvg),\n ok: true,\n });\n }\n\n if (url === 'http://localhost/test.svg') {\n return Promise.resolve({\n text: () => Promise.resolve(exampleSvg),\n ok: true,\n });\n }\n\n if (url === 'http://localhost/invalid.svg') {\n return Promise.resolve({\n text: () => Promise.resolve(invalidexampleSvg),\n ok: true,\n });\n }\n}) as jest.Mock);\n\ndescribe('resolve icon', () => {\n beforeEach(() => {\n fetch.mockClear();\n });\n\n it('should resolve svg from name', async () => {\n const data = await resolveIcon('bulb');\n\n expect(data).toBe(\n `<svg width=\\\"512px\\\" height=\\\"512px\\\" viewBox=\\\"0 0 512 512\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>add</title> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"Shape\\\" fill=\\\"#000000\\\" transform=\\\"translate(65.929697, 65.929697)\\\"> <polygon points=\\\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\\\"></polygon> </g> </g> </svg>`,\n );\n });\n\n it('should resolve svg from src', async () => {\n const expectedName = await resolveIcon('http://localhost/test.svg');\n\n expect(expectedName).toEqual(\n `<svg width=\\\"512px\\\" height=\\\"512px\\\" viewBox=\\\"0 0 512 512\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>add</title> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"Shape\\\" fill=\\\"#000000\\\" transform=\\\"translate(65.929697, 65.929697)\\\"> <polygon points=\\\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\\\"></polygon> </g> </g> </svg>`,\n );\n });\n\n it('should not resolve invalid svg from src', async () => {\n const icon = 'http://localhost/invalid.svg';\n\n await expect(resolveIcon(icon)).rejects.toThrow('No valid svg data provided');\n });\n});\n\ntest('preload icon map', async () => {\n fetch.mockClear();\n\n const cacheMap = getIconCacheMap();\n cacheMap.clear();\n\n preloadIconMap();\n expect(cacheMap.size).toBeGreaterThan(0);\n\n const data = await resolveIcon('bulb');\n\n expect(cacheMap.size).toBeGreaterThan(0);\n expect(fetch).not.toHaveBeenCalled();\n expect(data).toBe(\n '<svg width=\"512px\" height=\"512px\" viewBox=\"0 0 512 512\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g id=\"Combined-Shape\" transform=\"translate(42.666667, 21.333333)\"><path d=\"M213.333333,85.3333333 C284.025781,85.3333333 341.333333,142.640885 341.333333,213.333333 C341.333333,260.711239 315.5928,302.077122 277.333732,324.208982 L277.333333,405.333333 L256,426.666667 L234.666667,426.666667 C234.666667,438.448741 225.115408,448 213.333333,448 C201.551259,448 192,438.448741 192,426.666667 L192,426.666667 L170.666667,426.666667 L149.333333,405.333333 L149.332954,324.208993 C111.073876,302.077136 85.3333333,260.711248 85.3333333,213.333333 C85.3333333,142.640885 142.640885,85.3333333 213.333333,85.3333333 Z M234.667665,339.563386 C227.72957,340.727434 220.602209,341.333333 213.333333,341.333333 C206.064458,341.333333 198.937097,340.727434 191.999002,339.563386 L192,384 L234.666667,384 L234.667665,339.563386 Z M96.4250122,307.614237 L119.052429,330.241654 L73.7975952,375.496488 L51.1701782,352.869071 L96.4250122,307.614237 Z M330.241654,307.614237 L375.496488,352.869071 L352.869071,375.496488 L307.614237,330.241654 L330.241654,307.614237 Z M213.333333,128 C166.205035,128 128,166.205035 128,213.333333 C128,260.461632 166.205035,298.666667 213.333333,298.666667 C260.461632,298.666667 298.666667,260.461632 298.666667,213.333333 C298.666667,166.205035 260.461632,128 213.333333,128 Z M426.666667,197.333333 L426.666667,229.333333 L362.666667,229.333333 L362.666667,197.333333 L426.666667,197.333333 Z M64,197.333333 L64,229.333333 L3.55271368e-14,229.333333 L3.55271368e-14,197.333333 L64,197.333333 Z M352.869071,51.1701782 L375.496488,73.7975952 L330.241654,119.052429 L307.614237,96.4250122 L352.869071,51.1701782 Z M73.7975952,51.1701782 L119.052429,96.4250122 L96.4250122,119.052429 L51.1701782,73.7975952 L73.7975952,51.1701782 Z M229.333333,-1.0658141e-14 L229.333333,64 L197.333333,64 L197.333333,-1.0658141e-14 L229.333333,-1.0658141e-14 Z\"></path></g></g></svg>',\n );\n});\n\ntest('fill cache map if not loaded', async () => {\n fetch.mockClear();\n\n const cacheMap = getIconCacheMap();\n cacheMap.clear();\n\n expect(cacheMap.size).toBe(0);\n\n const data = await resolveIcon('star');\n\n expect(data).toBe(parseSVGDataContent(iconStar));\n expect(cacheMap.get(getAssetUrl('star'))).toBe(parseSVGDataContent(iconStar));\n});\n\ntest('preload custom icon', async () => {\n fetch.mockClear();\n\n const cacheMap = getIconCacheMap();\n cacheMap.clear();\n\n cacheMap.set(getAssetUrl('star'), '<svg>Test</svg>');\n\n const data = await resolveIcon('star');\n expect(data).toBe('<svg>Test</svg>');\n});\n"]}
|
package/dist/collection/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC","sourcesContent":["export type { Components, JSX } from './components';\nexport * from './components/icon/icon';\n"]}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export type { Components, JSX } from './components';\nexport * from './components/icon/icon';\nexport { preloadIconMap } from './legacy-support';\nexport { setAssetPath } from '@stencil/core';\n"]}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
/*
|
2
|
+
* SPDX-FileCopyrightText: 2024 Siemens AG
|
3
|
+
*
|
4
|
+
* SPDX-License-Identifier: MIT
|
5
|
+
*
|
6
|
+
* This source code is licensed under the MIT license found in the
|
7
|
+
* LICENSE file in the root directory of this source tree.
|
8
|
+
*/
|
9
|
+
import { setAssetPath } from "@stencil/core";
|
10
|
+
import * as icons from "./components/icon/icons";
|
11
|
+
import { getIconCacheMap, parseSVGDataContent, getAssetUrl } from "./components/icon/resolveIcon";
|
12
|
+
function fromCamelToKebabCase(camelString) {
|
13
|
+
let kebabString = '';
|
14
|
+
for (const char of camelString) {
|
15
|
+
if (char.toUpperCase() === char) {
|
16
|
+
kebabString += '-' + char.toLowerCase();
|
17
|
+
}
|
18
|
+
else {
|
19
|
+
kebabString += char;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
if (kebabString.startsWith('-')) {
|
23
|
+
kebabString = kebabString.slice(1);
|
24
|
+
}
|
25
|
+
return kebabString;
|
26
|
+
}
|
27
|
+
export function preloadIconMap() {
|
28
|
+
const iconsCache = getIconCacheMap();
|
29
|
+
Object.keys(icons).forEach(key => {
|
30
|
+
const fileName = fromCamelToKebabCase(key.substring('icon'.length));
|
31
|
+
const icon = icons[key];
|
32
|
+
let url = '';
|
33
|
+
try {
|
34
|
+
url = getAssetUrl(fileName);
|
35
|
+
}
|
36
|
+
catch (error) {
|
37
|
+
setAssetPath(`${window.location.origin}/`);
|
38
|
+
}
|
39
|
+
finally {
|
40
|
+
url = getAssetUrl(fileName);
|
41
|
+
}
|
42
|
+
iconsCache.set(url, parseSVGDataContent(icon));
|
43
|
+
});
|
44
|
+
}
|
45
|
+
//# sourceMappingURL=legacy-support.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"legacy-support.js","sourceRoot":"","sources":["../src/legacy-support.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAElG,SAAS,oBAAoB,CAAC,WAAmB;IAC/C,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE,CAAC;YAChC,WAAW,IAAI,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,WAAW,IAAI,IAAI,CAAC;QACtB,CAAC;IACH,CAAC;IACD,IAAI,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;QAChC,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,UAAU,GAAG,eAAe,EAAE,CAAC;IACrC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QAC/B,MAAM,QAAQ,GAAG,oBAAoB,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;QACpE,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAExB,IAAI,GAAG,GAAW,EAAE,CAAC;QACrB,IAAI,CAAC;YACH,GAAG,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,YAAY,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAC7C,CAAC;gBAAS,CAAC;YACT,GAAG,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;QAED,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { setAssetPath } from '@stencil/core';\nimport * as icons from './components/icon/icons';\nimport { getIconCacheMap, parseSVGDataContent, getAssetUrl } from './components/icon/resolveIcon';\n\nfunction fromCamelToKebabCase(camelString: string): string {\n let kebabString = '';\n for (const char of camelString) {\n if (char.toUpperCase() === char) {\n kebabString += '-' + char.toLowerCase();\n } else {\n kebabString += char;\n }\n }\n if (kebabString.startsWith('-')) {\n kebabString = kebabString.slice(1);\n }\n return kebabString;\n}\n\nexport function preloadIconMap() {\n const iconsCache = getIconCacheMap();\n Object.keys(icons).forEach(key => {\n const fileName = fromCamelToKebabCase(key.substring('icon'.length));\n const icon = icons[key];\n\n let url: string = '';\n try {\n url = getAssetUrl(fileName);\n } catch (error) {\n setAssetPath(`${window.location.origin}/`);\n } finally {\n url = getAssetUrl(fileName);\n }\n\n iconsCache.set(url, parseSVGDataContent(icon));\n });\n}\n"]}
|
package/dist/components/icon.js
CHANGED
@@ -3,16 +3,6 @@ import { getAssetPath, proxyCustomElement, HTMLElement, Build, h, Host } from '@
|
|
3
3
|
/*
|
4
4
|
* COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED.
|
5
5
|
*/
|
6
|
-
function getV3PreviewMetaElement() {
|
7
|
-
return document.querySelector("meta[name='ix-icons:v3-preview']");
|
8
|
-
}
|
9
|
-
function getV3PreviewMetaContent() {
|
10
|
-
const v3PreviewMetaElement = getV3PreviewMetaElement();
|
11
|
-
if (v3PreviewMetaElement) {
|
12
|
-
return v3PreviewMetaElement.getAttribute('content').split(';');
|
13
|
-
}
|
14
|
-
return null;
|
15
|
-
}
|
16
6
|
/**
|
17
7
|
* Provide custom SVG path for icons
|
18
8
|
*
|
@@ -26,21 +16,6 @@ function getCustomAssetUrl() {
|
|
26
16
|
}
|
27
17
|
return false;
|
28
18
|
}
|
29
|
-
/**
|
30
|
-
* Enable v3 preview features
|
31
|
-
*
|
32
|
-
* <meta name="ix-icons:v3-preview" content="svg-path-loading;" />
|
33
|
-
*/
|
34
|
-
function isV3PreviewEnabled() {
|
35
|
-
const features = getV3PreviewMetaContent();
|
36
|
-
if (!features) {
|
37
|
-
return false;
|
38
|
-
}
|
39
|
-
if (features.includes('svg-path-loading')) {
|
40
|
-
return true;
|
41
|
-
}
|
42
|
-
return false;
|
43
|
-
}
|
44
19
|
|
45
20
|
/*
|
46
21
|
* SPDX-FileCopyrightText: 2023 Siemens AG
|
@@ -53,25 +28,6 @@ function isV3PreviewEnabled() {
|
|
53
28
|
let fetchCache;
|
54
29
|
const requests = new Map();
|
55
30
|
let parser = null;
|
56
|
-
function toCamelCase(value) {
|
57
|
-
value = value.replace(/[\(\)\[\]\{\}\=\?\!\.\:,\-_\+\\\"#~\/]/g, ' ');
|
58
|
-
let returnValue = '';
|
59
|
-
let makeNextUppercase = true;
|
60
|
-
value = value.toLowerCase();
|
61
|
-
for (let i = 0; value.length > i; i++) {
|
62
|
-
let c = value.charAt(i);
|
63
|
-
if (c.match(/^\s+$/g) || c.match(/[\(\)\[\]\{\}\\\/]/g)) {
|
64
|
-
makeNextUppercase = true;
|
65
|
-
}
|
66
|
-
else if (makeNextUppercase) {
|
67
|
-
c = c.toUpperCase();
|
68
|
-
makeNextUppercase = false;
|
69
|
-
}
|
70
|
-
returnValue += c;
|
71
|
-
}
|
72
|
-
const normalized = returnValue.replace(/\s+/g, '');
|
73
|
-
return normalized.charAt(0).toUpperCase() + normalized.slice(1);
|
74
|
-
}
|
75
31
|
const getIconCacheMap = () => {
|
76
32
|
if (typeof window === 'undefined') {
|
77
33
|
return new Map();
|
@@ -107,14 +63,13 @@ function parseSVGDataContent(content) {
|
|
107
63
|
return svgElement.outerHTML;
|
108
64
|
}
|
109
65
|
async function fetchSVG(url) {
|
110
|
-
const request = requests.get(url);
|
111
|
-
if (request) {
|
112
|
-
return request;
|
113
|
-
}
|
114
66
|
const cache = getIconCacheMap();
|
115
67
|
if (cache.has(url)) {
|
116
68
|
return cache.get(url);
|
117
69
|
}
|
70
|
+
if (requests.has(url)) {
|
71
|
+
return requests.get(url);
|
72
|
+
}
|
118
73
|
const fetching = fetch(url).then(async (response) => {
|
119
74
|
const responseText = await response.text();
|
120
75
|
if (!response.ok) {
|
@@ -139,12 +94,6 @@ function getAssetUrl(name) {
|
|
139
94
|
}
|
140
95
|
return getAssetPath(`svg/${name}.svg`);
|
141
96
|
}
|
142
|
-
async function getESMIcon(name) {
|
143
|
-
const esmIcon = await import('./icons.js');
|
144
|
-
let iconName = toCamelCase(name);
|
145
|
-
iconName = `icon${iconName}`;
|
146
|
-
return parseSVGDataContent(esmIcon[iconName]);
|
147
|
-
}
|
148
97
|
async function resolveIcon(iconName) {
|
149
98
|
if (!iconName) {
|
150
99
|
throw Error('No icon name provided');
|
@@ -160,16 +109,12 @@ async function resolveIcon(iconName) {
|
|
160
109
|
throw error;
|
161
110
|
}
|
162
111
|
}
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
catch (error) {
|
169
|
-
throw Error('Cannot resolve any icon');
|
170
|
-
}
|
112
|
+
try {
|
113
|
+
return fetchSVG(getAssetUrl(iconName));
|
114
|
+
}
|
115
|
+
catch (error) {
|
116
|
+
throw Error('Cannot resolve any icon');
|
171
117
|
}
|
172
|
-
return getESMIcon(iconName);
|
173
118
|
}
|
174
119
|
|
175
120
|
const iconCss = ":host{display:inline-flex;height:1.5rem;width:1.5rem;min-height:1.5rem;min-width:1.5rem;color:inherit}:host .svg-container{display:block;position:relative;width:100%;height:100%}:host .svg-container svg{display:block;position:relative;height:100%;width:100%}:host .svg-container svg,:host .svg-container svg[fill],:host .svg-container svg [fill]{fill:currentColor !important}:host(.size-12){height:0.75rem;width:0.75rem;min-height:0.75rem;min-width:0.75rem}:host(.size-16){height:1rem;width:1rem;min-height:1rem;min-width:1rem}:host(.size-32){height:2rem;width:2rem;min-height:2rem;min-width:2rem}";
|
@@ -262,6 +207,6 @@ function defineCustomElement() {
|
|
262
207
|
} });
|
263
208
|
}
|
264
209
|
|
265
|
-
export { Icon as I, defineCustomElement as d };
|
210
|
+
export { Icon as I, getAssetUrl as a, defineCustomElement as d, getIconCacheMap as g, parseSVGDataContent as p };
|
266
211
|
|
267
212
|
//# sourceMappingURL=icon.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"file":"icon.js","mappings":"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","names":[],"sources":["src/components/icon/meta-tag.ts","src/components/icon/resolveIcon.ts","src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["/*\n * COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED.\n */\n\nfunction getV3PreviewMetaElement() {\n return document.querySelector(\"meta[name='ix-icons:v3-preview']\");\n}\n\nfunction getV3PreviewMetaContent() {\n const v3PreviewMetaElement = getV3PreviewMetaElement();\n if (v3PreviewMetaElement) {\n return v3PreviewMetaElement.getAttribute('content').split(';');\n }\n\n return null;\n}\n\n/**\n * Provide custom SVG path for icons\n *\n * <meta name=\"ix-icons:path\" content=\"/build/svg\" />\n */\nexport function getCustomAssetUrl() {\n const assetPath = document.querySelector(\"meta[name='ix-icons:path']\");\n if (assetPath) {\n const path = assetPath.getAttribute('content');\n return path;\n }\n\n return false;\n}\n\n/**\n * Enable v3 preview features\n *\n * <meta name=\"ix-icons:v3-preview\" content=\"svg-path-loading;\" />\n */\nexport function isV3PreviewEnabled() {\n const features = getV3PreviewMetaContent();\n\n if (!features) {\n return false;\n }\n\n if (features.includes('svg-path-loading')) {\n return true;\n }\n\n return false;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { getAssetPath } from '@stencil/core';\nimport { getCustomAssetUrl, isV3PreviewEnabled } from './meta-tag';\n\ndeclare global {\n interface Window {\n IxIcons: any;\n }\n}\n\nlet fetchCache: Map<string, string>;\nconst requests = new Map<string, Promise<string>>();\nlet parser = null;\n\nfunction toCamelCase(value: string) {\n value = value.replace(/[\\(\\)\\[\\]\\{\\}\\=\\?\\!\\.\\:,\\-_\\+\\\\\\\"#~\\/]/g, ' ');\n let returnValue = '';\n let makeNextUppercase = true;\n value = value.toLowerCase();\n for (let i = 0; value.length > i; i++) {\n let c = value.charAt(i);\n if (c.match(/^\\s+$/g) || c.match(/[\\(\\)\\[\\]\\{\\}\\\\\\/]/g)) {\n makeNextUppercase = true;\n } else if (makeNextUppercase) {\n c = c.toUpperCase();\n makeNextUppercase = false;\n }\n returnValue += c;\n }\n const normalized = returnValue.replace(/\\s+/g, '');\n return normalized.charAt(0).toUpperCase() + normalized.slice(1);\n}\n\nexport const getIconCacheMap = (): Map<string, string> => {\n if (typeof window === 'undefined') {\n return new Map();\n }\n\n if (!fetchCache) {\n window.IxIcons = window.IxIcons || {};\n fetchCache = window.IxIcons.map = window.IxIcons.map || new Map();\n }\n return fetchCache;\n};\n\nexport const isSvgDataUrl = (url: string) => {\n if (!url) {\n return false;\n }\n\n if (typeof url !== 'string') {\n return false;\n }\n\n return url.startsWith('data:image/svg+xml');\n};\n\nexport function parseSVGDataContent(content: string) {\n if (typeof window['DOMParser'] === 'undefined') {\n console.warn('DOMParser not supported by your browser.');\n return;\n }\n\n if (parser === null) {\n parser = new window['DOMParser']();\n }\n\n const svgDocument = parser.parseFromString(content, 'text/html');\n const svgElement = svgDocument.querySelector('svg') as HTMLElement;\n\n if (!svgElement) {\n throw Error('No valid svg data provided');\n }\n\n return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n const request = requests.get(url);\n\n if (request) {\n return request;\n }\n\n const cache = getIconCacheMap();\n\n if (cache.has(url)) {\n return cache.get(url);\n }\n\n const fetching = fetch(url).then(async response => {\n const responseText = await response.text();\n\n if (!response.ok) {\n console.error(responseText);\n throw Error(responseText);\n }\n\n const svgContent = parseSVGDataContent(responseText);\n cache.set(url, svgContent);\n\n return svgContent;\n });\n\n requests.set(url, fetching);\n return fetching;\n}\nconst urlRegex = /^(?:(?:https?|ftp):\\/\\/)?(?:\\S+(?::\\S*)?@)?(?:www\\.)?(?:\\S+\\.\\S+)(?:\\S*)$/i;\n\nfunction isValidUrl(url: string) {\n return urlRegex.test(url);\n}\n\nfunction getAssetUrl(name: string) {\n const customAssetUrl = getCustomAssetUrl();\n if (customAssetUrl) {\n return `${customAssetUrl}/${name}.svg`;\n }\n\n return getAssetPath(`svg/${name}.svg`);\n}\n\nasync function getESMIcon(name: string) {\n const esmIcon = await import('./icons');\n let iconName = toCamelCase(name);\n iconName = `icon${iconName}`;\n\n return parseSVGDataContent(esmIcon[iconName]);\n}\n\nexport async function resolveIcon(iconName: string) {\n if (!iconName) {\n throw Error('No icon name provided');\n }\n\n if (isSvgDataUrl(iconName)) {\n return parseSVGDataContent(iconName);\n }\n\n if (isValidUrl(iconName)) {\n try {\n return fetchSVG(iconName);\n } catch (error) {\n throw error;\n }\n }\n\n if (isV3PreviewEnabled()) {\n console.warn('Using V3 preview feature for loading icons.');\n try {\n return fetchSVG(getAssetUrl(iconName));\n } catch (error) {\n throw Error('Cannot resolve any icon');\n }\n }\n\n return getESMIcon(iconName);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@mixin size($size) {\n height: $size;\n width: $size;\n min-height: $size;\n min-width: $size;\n}\n\n:host {\n display: inline-flex;\n @include size(1.5rem);\n color: inherit;\n\n .svg-container {\n display: block;\n position: relative;\n width: 100%;\n height: 100%;\n\n svg {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n }\n\n svg,\n svg[fill],\n svg [fill] {\n fill: currentColor !important;\n }\n }\n}\n\n:host(.size-12) {\n @include size(0.75rem);\n}\n\n:host(.size-16) {\n @include size(1rem);\n}\n\n:host(.size-32) {\n @include size(2rem);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, h, Host, Prop, State, Watch, Element, Build } from '@stencil/core';\nimport { parseSVGDataContent, resolveIcon } from './resolveIcon';\n\nconst iconMissingSymbol =\n \"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill-rule='evenodd' d='M384,0 L384,384 L0,384 L0,0 L384,0 Z M192,207.085 L57.751,341.333 L326.248,341.333 L192,207.085 Z M42.666,57.751 L42.666,326.248 L176.915,192 L42.666,57.751 Z M341.333,57.751 L207.085,192 L341.333,326.248 L341.333,57.751 Z M326.248,42.666 L57.751,42.666 L192,176.915 L326.248,42.666 Z' transform='translate(64 64)'/></svg>\";\n\n@Component({\n tag: 'ix-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n assetsDirs: ['svg'],\n})\nexport class Icon {\n @Element() hostElement: HTMLIxIconElement;\n\n /**\n * Size of the icon\n */\n @Prop() size: '12' | '16' | '24' | '32';\n\n /**\n * Color of the icon\n */\n @Prop() color: string;\n\n /**\n * Use one of our defined icon names e.g. `copy`\n *\n * https://ix.siemens.io/docs/icon-library/icons\n *\n * or the import variant\n *\n * ```\n * import { rocket } from '@siemens/ix-icons/icons';\n *\n * <ix-icon name={rocket}></ix-icon>\n * ```\n */\n @Prop() name: string;\n\n @Prop() lazyLoading = false;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n\n connectedCallback() {\n this.waitForRendering(() => {\n this.isVisible = true;\n this.loadIconContent();\n });\n }\n\n @Watch('name')\n async loadIconContent() {\n try {\n this.svgContent = await resolveIcon(this.name);\n } catch (error) {\n this.svgContent = parseSVGDataContent(iconMissingSymbol);\n }\n }\n\n private waitForRendering(onRender: () => void) {\n if (Build.isBrowser && this.lazyLoading && typeof window !== 'undefined' && (window as any).IntersectionObserver) {\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n onRender();\n observer.disconnect();\n }\n });\n },\n {\n rootMargin: '25px',\n },\n );\n\n observer.observe(this.hostElement);\n } else {\n onRender();\n }\n }\n\n render() {\n const style: {\n [key: string]: string;\n } = {};\n\n if (this.color) {\n style['color'] = `var(--theme-${this.color})`;\n }\n\n return (\n <Host\n style={style}\n class={{\n ['size-12']: this.size === '12',\n ['size-16']: this.size === '16',\n ['size-24']: this.size === '24',\n ['size-32']: this.size === '32',\n }}\n >\n <div class={'svg-container'} innerHTML={this.svgContent}></div>\n </Host>\n );\n }\n}\n"],"version":3}
|
1
|
+
{"file":"icon.js","mappings":"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","names":[],"sources":["src/components/icon/meta-tag.ts","src/components/icon/resolveIcon.ts","src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["/*\n * COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED.\n */\n/**\n * Provide custom SVG path for icons\n *\n * <meta name=\"ix-icons:path\" content=\"/build/svg\" />\n */\nexport function getCustomAssetUrl() {\n const assetPath = document.querySelector(\"meta[name='ix-icons:path']\");\n if (assetPath) {\n const path = assetPath.getAttribute('content');\n return path;\n }\n\n return false;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { getAssetPath } from '@stencil/core';\nimport { getCustomAssetUrl } from './meta-tag';\n\ndeclare global {\n interface Window {\n IxIcons: any;\n }\n}\n\nlet fetchCache: Map<string, string>;\nconst requests = new Map<string, Promise<string>>();\nlet parser = null;\n\nexport const getIconCacheMap = (): Map<string, string> => {\n if (typeof window === 'undefined') {\n return new Map();\n }\n\n if (!fetchCache) {\n window.IxIcons = window.IxIcons || {};\n fetchCache = window.IxIcons.map = window.IxIcons.map || new Map();\n }\n return fetchCache;\n};\n\nexport const isSvgDataUrl = (url: string) => {\n if (!url) {\n return false;\n }\n\n if (typeof url !== 'string') {\n return false;\n }\n\n return url.startsWith('data:image/svg+xml');\n};\n\nexport function parseSVGDataContent(content: string) {\n if (typeof window['DOMParser'] === 'undefined') {\n console.warn('DOMParser not supported by your browser.');\n return;\n }\n\n if (parser === null) {\n parser = new window['DOMParser']();\n }\n\n const svgDocument = parser.parseFromString(content, 'text/html');\n const svgElement = svgDocument.querySelector('svg') as HTMLElement;\n\n if (!svgElement) {\n throw Error('No valid svg data provided');\n }\n\n return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n const cache = getIconCacheMap();\n\n if (cache.has(url)) {\n return cache.get(url);\n }\n\n if (requests.has(url)) {\n return requests.get(url);\n }\n\n const fetching = fetch(url).then(async response => {\n const responseText = await response.text();\n\n if (!response.ok) {\n console.error(responseText);\n throw Error(responseText);\n }\n\n const svgContent = parseSVGDataContent(responseText);\n cache.set(url, svgContent);\n\n return svgContent;\n });\n\n requests.set(url, fetching);\n return fetching;\n}\nconst urlRegex = /^(?:(?:https?|ftp):\\/\\/)?(?:\\S+(?::\\S*)?@)?(?:www\\.)?(?:\\S+\\.\\S+)(?:\\S*)$/i;\n\nfunction isValidUrl(url: string) {\n return urlRegex.test(url);\n}\n\nexport function getAssetUrl(name: string) {\n const customAssetUrl = getCustomAssetUrl();\n if (customAssetUrl) {\n return `${customAssetUrl}/${name}.svg`;\n }\n\n return getAssetPath(`svg/${name}.svg`);\n}\n\nexport async function resolveIcon(iconName: string) {\n if (!iconName) {\n throw Error('No icon name provided');\n }\n\n if (isSvgDataUrl(iconName)) {\n return parseSVGDataContent(iconName);\n }\n\n if (isValidUrl(iconName)) {\n try {\n return fetchSVG(iconName);\n } catch (error) {\n throw error;\n }\n }\n\n try {\n return fetchSVG(getAssetUrl(iconName));\n } catch (error) {\n throw Error('Cannot resolve any icon');\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@mixin size($size) {\n height: $size;\n width: $size;\n min-height: $size;\n min-width: $size;\n}\n\n:host {\n display: inline-flex;\n @include size(1.5rem);\n color: inherit;\n\n .svg-container {\n display: block;\n position: relative;\n width: 100%;\n height: 100%;\n\n svg {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n }\n\n svg,\n svg[fill],\n svg [fill] {\n fill: currentColor !important;\n }\n }\n}\n\n:host(.size-12) {\n @include size(0.75rem);\n}\n\n:host(.size-16) {\n @include size(1rem);\n}\n\n:host(.size-32) {\n @include size(2rem);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, h, Host, Prop, State, Watch, Element, Build } from '@stencil/core';\nimport { parseSVGDataContent, resolveIcon } from './resolveIcon';\n\nconst iconMissingSymbol =\n \"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill-rule='evenodd' d='M384,0 L384,384 L0,384 L0,0 L384,0 Z M192,207.085 L57.751,341.333 L326.248,341.333 L192,207.085 Z M42.666,57.751 L42.666,326.248 L176.915,192 L42.666,57.751 Z M341.333,57.751 L207.085,192 L341.333,326.248 L341.333,57.751 Z M326.248,42.666 L57.751,42.666 L192,176.915 L326.248,42.666 Z' transform='translate(64 64)'/></svg>\";\n\n@Component({\n tag: 'ix-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n assetsDirs: ['svg'],\n})\nexport class Icon {\n @Element() hostElement: HTMLIxIconElement;\n\n /**\n * Size of the icon\n */\n @Prop() size: '12' | '16' | '24' | '32';\n\n /**\n * Color of the icon\n */\n @Prop() color: string;\n\n /**\n * Use one of our defined icon names e.g. `copy`\n *\n * https://ix.siemens.io/docs/icon-library/icons\n *\n * or the import variant\n *\n * ```\n * import { rocket } from '@siemens/ix-icons/icons';\n *\n * <ix-icon name={rocket}></ix-icon>\n * ```\n */\n @Prop() name: string;\n\n @Prop() lazyLoading = false;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n\n connectedCallback() {\n this.waitForRendering(() => {\n this.isVisible = true;\n this.loadIconContent();\n });\n }\n\n @Watch('name')\n async loadIconContent() {\n try {\n this.svgContent = await resolveIcon(this.name);\n } catch (error) {\n this.svgContent = parseSVGDataContent(iconMissingSymbol);\n }\n }\n\n private waitForRendering(onRender: () => void) {\n if (Build.isBrowser && this.lazyLoading && typeof window !== 'undefined' && (window as any).IntersectionObserver) {\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n onRender();\n observer.disconnect();\n }\n });\n },\n {\n rootMargin: '25px',\n },\n );\n\n observer.observe(this.hostElement);\n } else {\n onRender();\n }\n }\n\n render() {\n const style: {\n [key: string]: string;\n } = {};\n\n if (this.color) {\n style['color'] = `var(--theme-${this.color})`;\n }\n\n return (\n <Host\n style={style}\n class={{\n ['size-12']: this.size === '12',\n ['size-16']: this.size === '16',\n ['size-24']: this.size === '24',\n ['size-32']: this.size === '32',\n }}\n >\n <div class={'svg-container'} innerHTML={this.svgContent}></div>\n </Host>\n );\n }\n}\n"],"version":3}
|