@siemens/ix-icons 0.0.0-20240613090826 → 0.0.0-20240729073852
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{icon-0c8b3da7.js → icon-ee6021fa.js} +10 -61
- 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 +7 -36
- 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 +6 -60
- 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-7b034d22.js → icon-76ecbfbf.js} +8 -62
- 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-0c8b3da7.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-7b034d22.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-51684ec4.js +0 -2
- package/dist/ix-icons/p-51684ec4.js.map +0 -1
- package/dist/ix-icons/p-94b37f0d.entry.js +0 -2
- package/dist/ix-icons/p-efdd4090.js +0 -3
- package/dist/ix-icons/p-efdd4090.js.map +0 -1
- package/dist/ix-icons/p-f737ff39.js +0 -2
- package/dist/ix-icons/p-f737ff39.js.map +0 -1
- /package/dist/ix-icons/{p-94b37f0d.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();
|
|
@@ -89,19 +70,13 @@ const urlRegex = /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:www\.)?(?:\S+\.\
|
|
|
89
70
|
function isValidUrl(url) {
|
|
90
71
|
return urlRegex.test(url);
|
|
91
72
|
}
|
|
92
|
-
function getAssetUrl(name) {
|
|
73
|
+
export function getAssetUrl(name) {
|
|
93
74
|
const customAssetUrl = getCustomAssetUrl();
|
|
94
75
|
if (customAssetUrl) {
|
|
95
76
|
return `${customAssetUrl}/${name}.svg`;
|
|
96
77
|
}
|
|
97
78
|
return getAssetPath(`svg/${name}.svg`);
|
|
98
79
|
}
|
|
99
|
-
async function getESMIcon(name) {
|
|
100
|
-
const esmIcon = await import('./icons');
|
|
101
|
-
let iconName = toCamelCase(name);
|
|
102
|
-
iconName = `icon${iconName}`;
|
|
103
|
-
return parseSVGDataContent(esmIcon[iconName]);
|
|
104
|
-
}
|
|
105
80
|
export async function resolveIcon(iconName) {
|
|
106
81
|
if (!iconName) {
|
|
107
82
|
throw Error('No icon name provided');
|
|
@@ -117,15 +92,11 @@ export async function resolveIcon(iconName) {
|
|
|
117
92
|
throw error;
|
|
118
93
|
}
|
|
119
94
|
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
catch (error) {
|
|
126
|
-
throw Error('Cannot resolve any icon');
|
|
127
|
-
}
|
|
95
|
+
try {
|
|
96
|
+
return fetchSVG(getAssetUrl(iconName));
|
|
97
|
+
}
|
|
98
|
+
catch (error) {
|
|
99
|
+
throw Error('Cannot resolve any icon');
|
|
128
100
|
}
|
|
129
|
-
return getESMIcon(iconName);
|
|
130
101
|
}
|
|
131
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();
|
|
@@ -138,12 +94,6 @@ function getAssetUrl(name) {
|
|
|
138
94
|
}
|
|
139
95
|
return getAssetPath(`svg/${name}.svg`);
|
|
140
96
|
}
|
|
141
|
-
async function getESMIcon(name) {
|
|
142
|
-
const esmIcon = await import('./icons.js');
|
|
143
|
-
let iconName = toCamelCase(name);
|
|
144
|
-
iconName = `icon${iconName}`;
|
|
145
|
-
return parseSVGDataContent(esmIcon[iconName]);
|
|
146
|
-
}
|
|
147
97
|
async function resolveIcon(iconName) {
|
|
148
98
|
if (!iconName) {
|
|
149
99
|
throw Error('No icon name provided');
|
|
@@ -159,16 +109,12 @@ async function resolveIcon(iconName) {
|
|
|
159
109
|
throw error;
|
|
160
110
|
}
|
|
161
111
|
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
catch (error) {
|
|
168
|
-
throw Error('Cannot resolve any icon');
|
|
169
|
-
}
|
|
112
|
+
try {
|
|
113
|
+
return fetchSVG(getAssetUrl(iconName));
|
|
114
|
+
}
|
|
115
|
+
catch (error) {
|
|
116
|
+
throw Error('Cannot resolve any icon');
|
|
170
117
|
}
|
|
171
|
-
return getESMIcon(iconName);
|
|
172
118
|
}
|
|
173
119
|
|
|
174
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}";
|
|
@@ -261,6 +207,6 @@ function defineCustomElement() {
|
|
|
261
207
|
} });
|
|
262
208
|
}
|
|
263
209
|
|
|
264
|
-
export { Icon as I, defineCustomElement as d };
|
|
210
|
+
export { Icon as I, getAssetUrl as a, defineCustomElement as d, getIconCacheMap as g, parseSVGDataContent as p };
|
|
265
211
|
|
|
266
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 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\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}
|