iconly 1.4.4 → 1.5.1
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/README.md +19 -12
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +20 -20
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +20 -20
- package/dist/index.module.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +21 -23
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
</div>
|
|
17
17
|
<br>
|
|
18
18
|
|
|
19
|
-
➤ **
|
|
19
|
+
➤ **Install**
|
|
20
20
|
|
|
21
21
|
```console
|
|
22
22
|
$ yarn add iconly
|
|
@@ -28,6 +28,9 @@ $ yarn add iconly
|
|
|
28
28
|
```javascript
|
|
29
29
|
import Iconly from 'iconly';
|
|
30
30
|
```
|
|
31
|
+
<br>
|
|
32
|
+
|
|
33
|
+
➤ **Usage**
|
|
31
34
|
|
|
32
35
|
```javascript
|
|
33
36
|
const iconly = new Iconly({
|
|
@@ -38,16 +41,19 @@ const iconly = new Iconly({
|
|
|
38
41
|
|
|
39
42
|
iconly.init().then(() => console.log('Iconly is initialized and icons are loaded.'));
|
|
40
43
|
```
|
|
41
|
-
<br>
|
|
42
|
-
|
|
43
|
-
➤ **File with icons**
|
|
44
44
|
|
|
45
45
|
```HTML
|
|
46
46
|
<svg>
|
|
47
|
-
<
|
|
47
|
+
<use href="#icon-name"></use>
|
|
48
|
+
</svg>
|
|
49
|
+
```
|
|
50
|
+
<sub>File with icons</sub>
|
|
51
|
+
```HTML
|
|
52
|
+
<svg preserveAspectRatio="none" fill="none">
|
|
53
|
+
<symbol id="icon-one" viewBox="0 0 300 300">
|
|
48
54
|
<path ... />
|
|
49
55
|
</symbol>
|
|
50
|
-
<symbol id="icon-two" viewBox="0 0
|
|
56
|
+
<symbol id="icon-two" viewBox="0 0 300 300">
|
|
51
57
|
<path ... />
|
|
52
58
|
</symbol>
|
|
53
59
|
...
|
|
@@ -55,13 +61,14 @@ iconly.init().then(() => console.log('Iconly is initialized and icons are loaded
|
|
|
55
61
|
```
|
|
56
62
|
<br>
|
|
57
63
|
|
|
58
|
-
➤ **
|
|
64
|
+
➤ **Options**
|
|
59
65
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
66
|
+
| Option | Type | Default | Description |
|
|
67
|
+
|:-----------:|:-----------------------:|:---------------:|:--------------------------------------------------------------------------------------------------------|
|
|
68
|
+
| `file` | `string` | `'./icons.svg'` | The URL of the SVG file containing the icons. |
|
|
69
|
+
| `version` | `string` | `'1.0'` | The version of the icon set. |
|
|
70
|
+
| `debug` | `boolean` | `false` | If `true`, debug information and errors will be logged to the console. |
|
|
71
|
+
| `container` | `string \| HTMLElement` | `document.body` | The container element where the icons will be injected. Can be a CSS selector string or an HTMLElement. |
|
|
65
72
|
<br>
|
|
66
73
|
|
|
67
74
|
➤ **License**
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA,qBAAM,MAAM
|
|
1
|
+
{"mappings":"AAAA,qBAAM,MAAM;gBAUE,OAAO,GAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;KAAO;IAiE1G,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;CA4C5B;AAED,eAAe,MAAM,CAAC","sources":["src/src/index.ts","src/index.ts"],"sourcesContent":[null,"class Iconly {\n private static dbInstance: Promise<IDBDatabase> | null = null;\n\n private readonly options: {\n file: string;\n version: string;\n debug: boolean;\n container: HTMLElement;\n };\n\n constructor(options: { file?: string; version?: string; debug?: boolean; container?: string | HTMLElement } = {}) {\n const defaultOptions = {\n file: './icons.svg',\n version: '1.0',\n debug: false,\n container: document.body ?? document.documentElement,\n };\n\n this.options = {\n ...defaultOptions,\n ...options,\n container: typeof options.container === 'string'\n ? document.querySelector(options.container) ?? defaultOptions.container\n : options.container ?? defaultOptions.container,\n };\n\n if (!this.options.container) {\n throw new Error('Invalid container element');\n }\n\n if (!Iconly.dbInstance) {\n Iconly.dbInstance = this.openDB('iconlyDB', 1);\n }\n }\n\n private async openDB(name: string, version: number): Promise<IDBDatabase> {\n if (!('indexedDB' in window)) {\n this.logError('This browser doesn\\'t support IndexedDB');\n throw new Error('IndexedDB not supported');\n }\n\n return new Promise<IDBDatabase>((resolve, reject) => {\n const request = indexedDB.open(name, version);\n\n request.onerror = () => reject(new Error(`IndexedDB error: ${request.error}`));\n request.onupgradeneeded = (event: IDBVersionChangeEvent) => {\n const db = (event.target as IDBOpenDBRequest).result;\n if (!db.objectStoreNames.contains('icons')) {\n db.createObjectStore('icons', { keyPath: 'version' });\n }\n };\n request.onsuccess = () => resolve(request.result);\n });\n }\n\n private static async fetchData(file: string): Promise<string> {\n const response = await fetch(file);\n if (!response.ok) throw new Error('Network response was not ok');\n return response.text();\n }\n\n private insert(data: string): void {\n let iconSetDiv = document.getElementById('iconset');\n\n if (!iconSetDiv) {\n iconSetDiv = document.createElement('div');\n iconSetDiv.id = 'iconset';\n iconSetDiv.setAttribute('aria-hidden', 'true');\n iconSetDiv.style.cssText = 'width: 0; height: 0; position: absolute; left: -9999px;';\n this.options.container.appendChild(iconSetDiv);\n }\n\n iconSetDiv.innerHTML = data;\n }\n\n async init(): Promise<void> {\n const { file, version } = this.options;\n\n try {\n let data = await Iconly.fetchData(file);\n\n const db = await Iconly.dbInstance;\n const store = db.transaction('icons', 'readwrite').objectStore('icons');\n\n const dbVersion = await new Promise<{ version: string; data: string } | undefined>((resolve, reject) => {\n const request = store.get(version);\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n\n if (!dbVersion) {\n await new Promise<void>((resolve, reject) => {\n const request = store.put({ version, data });\n request.onsuccess = () => resolve();\n request.onerror = () => reject(request.error);\n });\n } else {\n data = dbVersion.data;\n }\n\n await new Promise<void>((resolve, reject) => {\n const tx = store.transaction;\n tx.oncomplete = () => resolve();\n tx.onerror = () => reject(tx.error);\n tx.onabort = () => reject(tx.error);\n });\n\n this.insert(data);\n } catch (error) {\n this.logError('Error initializing Iconly:', error);\n }\n }\n\n private logError(...messages: unknown[]): void {\n if (this.options.debug) {\n // eslint-disable-next-line no-console\n console.error(...messages);\n }\n }\n}\n\nexport default Iconly;\n"],"names":[],"version":3,"file":"index.d.ts.map"}
|
package/dist/index.js
CHANGED
|
@@ -11,8 +11,8 @@ $parcel$defineInteropFlag(module.exports);
|
|
|
11
11
|
|
|
12
12
|
$parcel$export(module.exports, "default", function () { return $a196c1ed25598f0e$export$2e2bcd8739ae039; });
|
|
13
13
|
class $a196c1ed25598f0e$var$Iconly {
|
|
14
|
-
static
|
|
15
|
-
|
|
14
|
+
static dbInstance = null;
|
|
15
|
+
options;
|
|
16
16
|
constructor(options = {}){
|
|
17
17
|
const defaultOptions = {
|
|
18
18
|
file: "./icons.svg",
|
|
@@ -20,17 +20,17 @@ class $a196c1ed25598f0e$var$Iconly {
|
|
|
20
20
|
debug: false,
|
|
21
21
|
container: document.body ?? document.documentElement
|
|
22
22
|
};
|
|
23
|
-
this
|
|
23
|
+
this.options = {
|
|
24
24
|
...defaultOptions,
|
|
25
25
|
...options,
|
|
26
26
|
container: typeof options.container === "string" ? document.querySelector(options.container) ?? defaultOptions.container : options.container ?? defaultOptions.container
|
|
27
27
|
};
|
|
28
|
-
if (!this
|
|
29
|
-
if (!$a196c1ed25598f0e$var$Iconly
|
|
28
|
+
if (!this.options.container) throw new Error("Invalid container element");
|
|
29
|
+
if (!$a196c1ed25598f0e$var$Iconly.dbInstance) $a196c1ed25598f0e$var$Iconly.dbInstance = this.openDB("iconlyDB", 1);
|
|
30
30
|
}
|
|
31
|
-
async
|
|
31
|
+
async openDB(name, version) {
|
|
32
32
|
if (!("indexedDB" in window)) {
|
|
33
|
-
this
|
|
33
|
+
this.logError("This browser doesn't support IndexedDB");
|
|
34
34
|
throw new Error("IndexedDB not supported");
|
|
35
35
|
}
|
|
36
36
|
return new Promise((resolve, reject)=>{
|
|
@@ -45,35 +45,34 @@ class $a196c1ed25598f0e$var$Iconly {
|
|
|
45
45
|
request.onsuccess = ()=>resolve(request.result);
|
|
46
46
|
});
|
|
47
47
|
}
|
|
48
|
-
static async
|
|
48
|
+
static async fetchData(file) {
|
|
49
49
|
const response = await fetch(file);
|
|
50
50
|
if (!response.ok) throw new Error("Network response was not ok");
|
|
51
51
|
return response.text();
|
|
52
52
|
}
|
|
53
|
-
|
|
53
|
+
insert(data) {
|
|
54
54
|
let iconSetDiv = document.getElementById("iconset");
|
|
55
55
|
if (!iconSetDiv) {
|
|
56
56
|
iconSetDiv = document.createElement("div");
|
|
57
57
|
iconSetDiv.id = "iconset";
|
|
58
58
|
iconSetDiv.setAttribute("aria-hidden", "true");
|
|
59
59
|
iconSetDiv.style.cssText = "width: 0; height: 0; position: absolute; left: -9999px;";
|
|
60
|
-
this
|
|
60
|
+
this.options.container.appendChild(iconSetDiv);
|
|
61
61
|
}
|
|
62
62
|
iconSetDiv.innerHTML = data;
|
|
63
63
|
}
|
|
64
64
|
async init() {
|
|
65
|
-
const { file: file, version: version } = this
|
|
65
|
+
const { file: file, version: version } = this.options;
|
|
66
66
|
try {
|
|
67
|
-
let data = await $a196c1ed25598f0e$var$Iconly
|
|
68
|
-
const db = await $a196c1ed25598f0e$var$Iconly
|
|
69
|
-
const
|
|
70
|
-
const store = tx.objectStore("icons");
|
|
67
|
+
let data = await $a196c1ed25598f0e$var$Iconly.fetchData(file);
|
|
68
|
+
const db = await $a196c1ed25598f0e$var$Iconly.dbInstance;
|
|
69
|
+
const store = db.transaction("icons", "readwrite").objectStore("icons");
|
|
71
70
|
const dbVersion = await new Promise((resolve, reject)=>{
|
|
72
71
|
const request = store.get(version);
|
|
73
72
|
request.onsuccess = ()=>resolve(request.result);
|
|
74
73
|
request.onerror = ()=>reject(request.error);
|
|
75
74
|
});
|
|
76
|
-
if (!
|
|
75
|
+
if (!dbVersion) await new Promise((resolve, reject)=>{
|
|
77
76
|
const request = store.put({
|
|
78
77
|
version: version,
|
|
79
78
|
data: data
|
|
@@ -83,17 +82,18 @@ class $a196c1ed25598f0e$var$Iconly {
|
|
|
83
82
|
});
|
|
84
83
|
else data = dbVersion.data;
|
|
85
84
|
await new Promise((resolve, reject)=>{
|
|
85
|
+
const tx = store.transaction;
|
|
86
86
|
tx.oncomplete = ()=>resolve();
|
|
87
87
|
tx.onerror = ()=>reject(tx.error);
|
|
88
88
|
tx.onabort = ()=>reject(tx.error);
|
|
89
89
|
});
|
|
90
|
-
this
|
|
90
|
+
this.insert(data);
|
|
91
91
|
} catch (error) {
|
|
92
|
-
this
|
|
92
|
+
this.logError("Error initializing Iconly:", error);
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
|
-
|
|
96
|
-
if (this
|
|
95
|
+
logError(...messages) {
|
|
96
|
+
if (this.options.debug) // eslint-disable-next-line no-console
|
|
97
97
|
console.error(...messages);
|
|
98
98
|
}
|
|
99
99
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;AAAA,MAAM;IACJ,
|
|
1
|
+
{"mappings":"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","sources":["src/index.ts"],"sourcesContent":["class Iconly {\n private static dbInstance: Promise<IDBDatabase> | null = null;\n\n private readonly options: {\n file: string;\n version: string;\n debug: boolean;\n container: HTMLElement;\n };\n\n constructor(options: { file?: string; version?: string; debug?: boolean; container?: string | HTMLElement } = {}) {\n const defaultOptions = {\n file: './icons.svg',\n version: '1.0',\n debug: false,\n container: document.body ?? document.documentElement,\n };\n\n this.options = {\n ...defaultOptions,\n ...options,\n container: typeof options.container === 'string'\n ? document.querySelector(options.container) ?? defaultOptions.container\n : options.container ?? defaultOptions.container,\n };\n\n if (!this.options.container) {\n throw new Error('Invalid container element');\n }\n\n if (!Iconly.dbInstance) {\n Iconly.dbInstance = this.openDB('iconlyDB', 1);\n }\n }\n\n private async openDB(name: string, version: number): Promise<IDBDatabase> {\n if (!('indexedDB' in window)) {\n this.logError('This browser doesn\\'t support IndexedDB');\n throw new Error('IndexedDB not supported');\n }\n\n return new Promise<IDBDatabase>((resolve, reject) => {\n const request = indexedDB.open(name, version);\n\n request.onerror = () => reject(new Error(`IndexedDB error: ${request.error}`));\n request.onupgradeneeded = (event: IDBVersionChangeEvent) => {\n const db = (event.target as IDBOpenDBRequest).result;\n if (!db.objectStoreNames.contains('icons')) {\n db.createObjectStore('icons', { keyPath: 'version' });\n }\n };\n request.onsuccess = () => resolve(request.result);\n });\n }\n\n private static async fetchData(file: string): Promise<string> {\n const response = await fetch(file);\n if (!response.ok) throw new Error('Network response was not ok');\n return response.text();\n }\n\n private insert(data: string): void {\n let iconSetDiv = document.getElementById('iconset');\n\n if (!iconSetDiv) {\n iconSetDiv = document.createElement('div');\n iconSetDiv.id = 'iconset';\n iconSetDiv.setAttribute('aria-hidden', 'true');\n iconSetDiv.style.cssText = 'width: 0; height: 0; position: absolute; left: -9999px;';\n this.options.container.appendChild(iconSetDiv);\n }\n\n iconSetDiv.innerHTML = data;\n }\n\n async init(): Promise<void> {\n const { file, version } = this.options;\n\n try {\n let data = await Iconly.fetchData(file);\n\n const db = await Iconly.dbInstance;\n const store = db.transaction('icons', 'readwrite').objectStore('icons');\n\n const dbVersion = await new Promise<{ version: string; data: string } | undefined>((resolve, reject) => {\n const request = store.get(version);\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n\n if (!dbVersion) {\n await new Promise<void>((resolve, reject) => {\n const request = store.put({ version, data });\n request.onsuccess = () => resolve();\n request.onerror = () => reject(request.error);\n });\n } else {\n data = dbVersion.data;\n }\n\n await new Promise<void>((resolve, reject) => {\n const tx = store.transaction;\n tx.oncomplete = () => resolve();\n tx.onerror = () => reject(tx.error);\n tx.onabort = () => reject(tx.error);\n });\n\n this.insert(data);\n } catch (error) {\n this.logError('Error initializing Iconly:', error);\n }\n }\n\n private logError(...messages: unknown[]): void {\n if (this.options.debug) {\n // eslint-disable-next-line no-console\n console.error(...messages);\n }\n }\n}\n\nexport default Iconly;\n"],"names":[],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
class $643fcf18b2d2e76f$var$Iconly {
|
|
2
|
-
static
|
|
3
|
-
|
|
2
|
+
static dbInstance = null;
|
|
3
|
+
options;
|
|
4
4
|
constructor(options = {}){
|
|
5
5
|
const defaultOptions = {
|
|
6
6
|
file: "./icons.svg",
|
|
@@ -8,17 +8,17 @@ class $643fcf18b2d2e76f$var$Iconly {
|
|
|
8
8
|
debug: false,
|
|
9
9
|
container: document.body ?? document.documentElement
|
|
10
10
|
};
|
|
11
|
-
this
|
|
11
|
+
this.options = {
|
|
12
12
|
...defaultOptions,
|
|
13
13
|
...options,
|
|
14
14
|
container: typeof options.container === "string" ? document.querySelector(options.container) ?? defaultOptions.container : options.container ?? defaultOptions.container
|
|
15
15
|
};
|
|
16
|
-
if (!this
|
|
17
|
-
if (!$643fcf18b2d2e76f$var$Iconly
|
|
16
|
+
if (!this.options.container) throw new Error("Invalid container element");
|
|
17
|
+
if (!$643fcf18b2d2e76f$var$Iconly.dbInstance) $643fcf18b2d2e76f$var$Iconly.dbInstance = this.openDB("iconlyDB", 1);
|
|
18
18
|
}
|
|
19
|
-
async
|
|
19
|
+
async openDB(name, version) {
|
|
20
20
|
if (!("indexedDB" in window)) {
|
|
21
|
-
this
|
|
21
|
+
this.logError("This browser doesn't support IndexedDB");
|
|
22
22
|
throw new Error("IndexedDB not supported");
|
|
23
23
|
}
|
|
24
24
|
return new Promise((resolve, reject)=>{
|
|
@@ -33,35 +33,34 @@ class $643fcf18b2d2e76f$var$Iconly {
|
|
|
33
33
|
request.onsuccess = ()=>resolve(request.result);
|
|
34
34
|
});
|
|
35
35
|
}
|
|
36
|
-
static async
|
|
36
|
+
static async fetchData(file) {
|
|
37
37
|
const response = await fetch(file);
|
|
38
38
|
if (!response.ok) throw new Error("Network response was not ok");
|
|
39
39
|
return response.text();
|
|
40
40
|
}
|
|
41
|
-
|
|
41
|
+
insert(data) {
|
|
42
42
|
let iconSetDiv = document.getElementById("iconset");
|
|
43
43
|
if (!iconSetDiv) {
|
|
44
44
|
iconSetDiv = document.createElement("div");
|
|
45
45
|
iconSetDiv.id = "iconset";
|
|
46
46
|
iconSetDiv.setAttribute("aria-hidden", "true");
|
|
47
47
|
iconSetDiv.style.cssText = "width: 0; height: 0; position: absolute; left: -9999px;";
|
|
48
|
-
this
|
|
48
|
+
this.options.container.appendChild(iconSetDiv);
|
|
49
49
|
}
|
|
50
50
|
iconSetDiv.innerHTML = data;
|
|
51
51
|
}
|
|
52
52
|
async init() {
|
|
53
|
-
const { file: file, version: version } = this
|
|
53
|
+
const { file: file, version: version } = this.options;
|
|
54
54
|
try {
|
|
55
|
-
let data = await $643fcf18b2d2e76f$var$Iconly
|
|
56
|
-
const db = await $643fcf18b2d2e76f$var$Iconly
|
|
57
|
-
const
|
|
58
|
-
const store = tx.objectStore("icons");
|
|
55
|
+
let data = await $643fcf18b2d2e76f$var$Iconly.fetchData(file);
|
|
56
|
+
const db = await $643fcf18b2d2e76f$var$Iconly.dbInstance;
|
|
57
|
+
const store = db.transaction("icons", "readwrite").objectStore("icons");
|
|
59
58
|
const dbVersion = await new Promise((resolve, reject)=>{
|
|
60
59
|
const request = store.get(version);
|
|
61
60
|
request.onsuccess = ()=>resolve(request.result);
|
|
62
61
|
request.onerror = ()=>reject(request.error);
|
|
63
62
|
});
|
|
64
|
-
if (!
|
|
63
|
+
if (!dbVersion) await new Promise((resolve, reject)=>{
|
|
65
64
|
const request = store.put({
|
|
66
65
|
version: version,
|
|
67
66
|
data: data
|
|
@@ -71,17 +70,18 @@ class $643fcf18b2d2e76f$var$Iconly {
|
|
|
71
70
|
});
|
|
72
71
|
else data = dbVersion.data;
|
|
73
72
|
await new Promise((resolve, reject)=>{
|
|
73
|
+
const tx = store.transaction;
|
|
74
74
|
tx.oncomplete = ()=>resolve();
|
|
75
75
|
tx.onerror = ()=>reject(tx.error);
|
|
76
76
|
tx.onabort = ()=>reject(tx.error);
|
|
77
77
|
});
|
|
78
|
-
this
|
|
78
|
+
this.insert(data);
|
|
79
79
|
} catch (error) {
|
|
80
|
-
this
|
|
80
|
+
this.logError("Error initializing Iconly:", error);
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
|
|
84
|
-
if (this
|
|
83
|
+
logError(...messages) {
|
|
84
|
+
if (this.options.debug) // eslint-disable-next-line no-console
|
|
85
85
|
console.error(...messages);
|
|
86
86
|
}
|
|
87
87
|
}
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA,MAAM;IACJ,
|
|
1
|
+
{"mappings":"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","sources":["src/index.ts"],"sourcesContent":["class Iconly {\n private static dbInstance: Promise<IDBDatabase> | null = null;\n\n private readonly options: {\n file: string;\n version: string;\n debug: boolean;\n container: HTMLElement;\n };\n\n constructor(options: { file?: string; version?: string; debug?: boolean; container?: string | HTMLElement } = {}) {\n const defaultOptions = {\n file: './icons.svg',\n version: '1.0',\n debug: false,\n container: document.body ?? document.documentElement,\n };\n\n this.options = {\n ...defaultOptions,\n ...options,\n container: typeof options.container === 'string'\n ? document.querySelector(options.container) ?? defaultOptions.container\n : options.container ?? defaultOptions.container,\n };\n\n if (!this.options.container) {\n throw new Error('Invalid container element');\n }\n\n if (!Iconly.dbInstance) {\n Iconly.dbInstance = this.openDB('iconlyDB', 1);\n }\n }\n\n private async openDB(name: string, version: number): Promise<IDBDatabase> {\n if (!('indexedDB' in window)) {\n this.logError('This browser doesn\\'t support IndexedDB');\n throw new Error('IndexedDB not supported');\n }\n\n return new Promise<IDBDatabase>((resolve, reject) => {\n const request = indexedDB.open(name, version);\n\n request.onerror = () => reject(new Error(`IndexedDB error: ${request.error}`));\n request.onupgradeneeded = (event: IDBVersionChangeEvent) => {\n const db = (event.target as IDBOpenDBRequest).result;\n if (!db.objectStoreNames.contains('icons')) {\n db.createObjectStore('icons', { keyPath: 'version' });\n }\n };\n request.onsuccess = () => resolve(request.result);\n });\n }\n\n private static async fetchData(file: string): Promise<string> {\n const response = await fetch(file);\n if (!response.ok) throw new Error('Network response was not ok');\n return response.text();\n }\n\n private insert(data: string): void {\n let iconSetDiv = document.getElementById('iconset');\n\n if (!iconSetDiv) {\n iconSetDiv = document.createElement('div');\n iconSetDiv.id = 'iconset';\n iconSetDiv.setAttribute('aria-hidden', 'true');\n iconSetDiv.style.cssText = 'width: 0; height: 0; position: absolute; left: -9999px;';\n this.options.container.appendChild(iconSetDiv);\n }\n\n iconSetDiv.innerHTML = data;\n }\n\n async init(): Promise<void> {\n const { file, version } = this.options;\n\n try {\n let data = await Iconly.fetchData(file);\n\n const db = await Iconly.dbInstance;\n const store = db.transaction('icons', 'readwrite').objectStore('icons');\n\n const dbVersion = await new Promise<{ version: string; data: string } | undefined>((resolve, reject) => {\n const request = store.get(version);\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n\n if (!dbVersion) {\n await new Promise<void>((resolve, reject) => {\n const request = store.put({ version, data });\n request.onsuccess = () => resolve();\n request.onerror = () => reject(request.error);\n });\n } else {\n data = dbVersion.data;\n }\n\n await new Promise<void>((resolve, reject) => {\n const tx = store.transaction;\n tx.oncomplete = () => resolve();\n tx.onerror = () => reject(tx.error);\n tx.onabort = () => reject(tx.error);\n });\n\n this.insert(data);\n } catch (error) {\n this.logError('Error initializing Iconly:', error);\n }\n }\n\n private logError(...messages: unknown[]): void {\n if (this.options.debug) {\n // eslint-disable-next-line no-console\n console.error(...messages);\n }\n }\n}\n\nexport default Iconly;\n"],"names":[],"version":3,"file":"index.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "iconly",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.1",
|
|
4
4
|
"description": "Iconly is designed to load and cache SVG icons in the browser, using IndexedDB to store the data. It retrieves the icons from a given SVG file, stores them in IndexedDB, and inserts them into the DOM for easy access and use.",
|
|
5
5
|
"author": "ux-ui.pro",
|
|
6
6
|
"license": "MIT",
|
package/src/index.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
class Iconly {
|
|
2
|
-
static
|
|
2
|
+
private static dbInstance: Promise<IDBDatabase> | null = null;
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
private readonly options: {
|
|
5
5
|
file: string;
|
|
6
6
|
version: string;
|
|
7
7
|
debug: boolean;
|
|
@@ -16,7 +16,7 @@ class Iconly {
|
|
|
16
16
|
container: document.body ?? document.documentElement,
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
-
this
|
|
19
|
+
this.options = {
|
|
20
20
|
...defaultOptions,
|
|
21
21
|
...options,
|
|
22
22
|
container: typeof options.container === 'string'
|
|
@@ -24,18 +24,18 @@ class Iconly {
|
|
|
24
24
|
: options.container ?? defaultOptions.container,
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
-
if (!this
|
|
27
|
+
if (!this.options.container) {
|
|
28
28
|
throw new Error('Invalid container element');
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
if (!Iconly
|
|
32
|
-
Iconly
|
|
31
|
+
if (!Iconly.dbInstance) {
|
|
32
|
+
Iconly.dbInstance = this.openDB('iconlyDB', 1);
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
async
|
|
36
|
+
private async openDB(name: string, version: number): Promise<IDBDatabase> {
|
|
37
37
|
if (!('indexedDB' in window)) {
|
|
38
|
-
this
|
|
38
|
+
this.logError('This browser doesn\'t support IndexedDB');
|
|
39
39
|
throw new Error('IndexedDB not supported');
|
|
40
40
|
}
|
|
41
41
|
|
|
@@ -53,13 +53,13 @@ class Iconly {
|
|
|
53
53
|
});
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
static async
|
|
56
|
+
private static async fetchData(file: string): Promise<string> {
|
|
57
57
|
const response = await fetch(file);
|
|
58
58
|
if (!response.ok) throw new Error('Network response was not ok');
|
|
59
59
|
return response.text();
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
private insert(data: string): void {
|
|
63
63
|
let iconSetDiv = document.getElementById('iconset');
|
|
64
64
|
|
|
65
65
|
if (!iconSetDiv) {
|
|
@@ -67,33 +67,30 @@ class Iconly {
|
|
|
67
67
|
iconSetDiv.id = 'iconset';
|
|
68
68
|
iconSetDiv.setAttribute('aria-hidden', 'true');
|
|
69
69
|
iconSetDiv.style.cssText = 'width: 0; height: 0; position: absolute; left: -9999px;';
|
|
70
|
-
this
|
|
70
|
+
this.options.container.appendChild(iconSetDiv);
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
iconSetDiv.innerHTML = data;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
async init(): Promise<void> {
|
|
77
|
-
const { file, version } = this
|
|
77
|
+
const { file, version } = this.options;
|
|
78
78
|
|
|
79
79
|
try {
|
|
80
|
-
let data = await Iconly
|
|
80
|
+
let data = await Iconly.fetchData(file);
|
|
81
81
|
|
|
82
|
-
const db = await Iconly
|
|
83
|
-
const
|
|
84
|
-
const store = tx.objectStore('icons');
|
|
82
|
+
const db = await Iconly.dbInstance;
|
|
83
|
+
const store = db.transaction('icons', 'readwrite').objectStore('icons');
|
|
85
84
|
|
|
86
85
|
const dbVersion = await new Promise<{ version: string; data: string } | undefined>((resolve, reject) => {
|
|
87
86
|
const request = store.get(version);
|
|
88
|
-
|
|
89
87
|
request.onsuccess = () => resolve(request.result);
|
|
90
88
|
request.onerror = () => reject(request.error);
|
|
91
89
|
});
|
|
92
90
|
|
|
93
|
-
if (!
|
|
91
|
+
if (!dbVersion) {
|
|
94
92
|
await new Promise<void>((resolve, reject) => {
|
|
95
93
|
const request = store.put({ version, data });
|
|
96
|
-
|
|
97
94
|
request.onsuccess = () => resolve();
|
|
98
95
|
request.onerror = () => reject(request.error);
|
|
99
96
|
});
|
|
@@ -102,19 +99,20 @@ class Iconly {
|
|
|
102
99
|
}
|
|
103
100
|
|
|
104
101
|
await new Promise<void>((resolve, reject) => {
|
|
102
|
+
const tx = store.transaction;
|
|
105
103
|
tx.oncomplete = () => resolve();
|
|
106
104
|
tx.onerror = () => reject(tx.error);
|
|
107
105
|
tx.onabort = () => reject(tx.error);
|
|
108
106
|
});
|
|
109
107
|
|
|
110
|
-
this
|
|
108
|
+
this.insert(data);
|
|
111
109
|
} catch (error) {
|
|
112
|
-
this
|
|
110
|
+
this.logError('Error initializing Iconly:', error);
|
|
113
111
|
}
|
|
114
112
|
}
|
|
115
113
|
|
|
116
|
-
|
|
117
|
-
if (this
|
|
114
|
+
private logError(...messages: unknown[]): void {
|
|
115
|
+
if (this.options.debug) {
|
|
118
116
|
// eslint-disable-next-line no-console
|
|
119
117
|
console.error(...messages);
|
|
120
118
|
}
|