iconly 1.2.2 → 1.4.0
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/LICENSE +1 -1
- package/README.md +12 -8
- package/dist/index.js +81 -27
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +79 -27
- package/dist/index.module.js.map +1 -1
- package/package.json +18 -8
- package/src/index.js +104 -33
- package/src/sprite.svg +2 -2
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
[](https://github.com/ux-ui-pro/iconly)
|
|
8
8
|
[](https://www.npmjs.org/package/iconly)
|
|
9
9
|
|
|
10
|
-
<
|
|
10
|
+
<p>The Iconly class is designed to manage icons in a web application</p>
|
|
11
11
|
<h3><a href="https://codepen.io/ux-ui/pen/zYmyqWR">Demo</a></h3>
|
|
12
12
|
|
|
13
13
|
</div>
|
|
@@ -22,13 +22,17 @@ $ yarn add iconly
|
|
|
22
22
|
|
|
23
23
|
### Import
|
|
24
24
|
```javascript
|
|
25
|
-
import Iconly from 'iconly'
|
|
25
|
+
import Iconly from 'iconly';
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
```javascript
|
|
29
|
-
new Iconly({
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
const iconly = new Iconly({
|
|
30
|
+
file: './sprite.svg',
|
|
31
|
+
version: '1.0',
|
|
32
|
+
debug: true,
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
iconly.init().then(() => console.log('Iconly is initialized and icons are loaded.'));
|
|
32
36
|
```
|
|
33
37
|
<br>
|
|
34
38
|
|
|
@@ -36,7 +40,7 @@ new Iconly({
|
|
|
36
40
|
<sub>icons.svg</sub>
|
|
37
41
|
|
|
38
42
|
```HTML
|
|
39
|
-
<svg
|
|
43
|
+
<svg>
|
|
40
44
|
<symbol id="icon-one" viewBox="0 0 100 100">
|
|
41
45
|
<path ... />
|
|
42
46
|
</symbol>
|
|
@@ -51,10 +55,10 @@ new Iconly({
|
|
|
51
55
|
### Usage
|
|
52
56
|
```HTML
|
|
53
57
|
<svg>
|
|
54
|
-
<use
|
|
58
|
+
<use href="#icon-name"></use>
|
|
55
59
|
</svg>
|
|
56
60
|
```
|
|
57
61
|
<br>
|
|
58
62
|
|
|
59
63
|
### License
|
|
60
|
-
<sup>iconly is released under MIT license</sup>
|
|
64
|
+
<sup>iconly is released under MIT license</sup>
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
|
|
1
2
|
function $parcel$defineInteropFlag(a) {
|
|
2
3
|
Object.defineProperty(a, '__esModule', {value: true, configurable: true});
|
|
3
4
|
}
|
|
5
|
+
|
|
4
6
|
function $parcel$export(e, n, v, s) {
|
|
5
7
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
6
8
|
}
|
|
@@ -8,46 +10,98 @@ function $parcel$export(e, n, v, s) {
|
|
|
8
10
|
$parcel$defineInteropFlag(module.exports);
|
|
9
11
|
|
|
10
12
|
$parcel$export(module.exports, "default", () => $4fa36e821943b400$export$2e2bcd8739ae039);
|
|
11
|
-
class $4fa36e821943b400$
|
|
13
|
+
class $4fa36e821943b400$var$Iconly {
|
|
14
|
+
static #dbInstance;
|
|
15
|
+
#options;
|
|
16
|
+
#container;
|
|
12
17
|
constructor(options){
|
|
13
|
-
this
|
|
18
|
+
this.#options = {
|
|
14
19
|
file: "./icons.svg",
|
|
20
|
+
version: "1.0",
|
|
21
|
+
debug: false,
|
|
22
|
+
container: document.body || document.documentElement,
|
|
15
23
|
...options
|
|
16
24
|
};
|
|
17
|
-
this
|
|
18
|
-
|
|
19
|
-
this.init().then();
|
|
25
|
+
this.#container = typeof this.#options.container === "string" ? document.querySelector(this.#options.container) : this.#options.container;
|
|
26
|
+
if (!$4fa36e821943b400$var$Iconly.#dbInstance) $4fa36e821943b400$var$Iconly.#dbInstance = this.#openDB("iconlyDB", 1);
|
|
20
27
|
}
|
|
21
|
-
async
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
28
|
+
async #openDB(name, version) {
|
|
29
|
+
if (!("indexedDB" in window)) {
|
|
30
|
+
this.#logError("This browser doesn't support IndexedDB");
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
let db;
|
|
34
|
+
try {
|
|
35
|
+
db = await new Promise((resolve, reject)=>{
|
|
36
|
+
const request = indexedDB.open(name, version);
|
|
37
|
+
request.onerror = ()=>reject(`IndexedDB error: ${request.error}`);
|
|
38
|
+
request.onupgradeneeded = (event)=>{
|
|
39
|
+
const db = event.target.result;
|
|
40
|
+
if (!db.objectStoreNames.contains("icons")) db.createObjectStore("icons", {
|
|
41
|
+
keyPath: "version"
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
request.onsuccess = ()=>resolve(request.result);
|
|
45
|
+
});
|
|
46
|
+
} catch (error) {
|
|
47
|
+
this.#logError(error);
|
|
48
|
+
throw error;
|
|
49
|
+
}
|
|
50
|
+
return db;
|
|
51
|
+
}
|
|
52
|
+
async #fetchData(file) {
|
|
53
|
+
try {
|
|
36
54
|
const response = await fetch(file);
|
|
37
55
|
if (!response.ok) throw new Error("Network response was not ok");
|
|
38
|
-
|
|
39
|
-
|
|
56
|
+
return response.text();
|
|
57
|
+
} catch (error) {
|
|
58
|
+
this.#logError(error);
|
|
59
|
+
throw error;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
async #insert(data) {
|
|
63
|
+
let iconSetDiv = document.getElementById("iconset");
|
|
64
|
+
if (!iconSetDiv) {
|
|
65
|
+
iconSetDiv = document.createElement("div");
|
|
66
|
+
iconSetDiv.id = "iconset";
|
|
67
|
+
iconSetDiv.setAttribute("aria-hidden", "true");
|
|
68
|
+
iconSetDiv.style.cssText = "width: 0; height: 0; position: absolute;";
|
|
69
|
+
this.#container.appendChild(iconSetDiv);
|
|
40
70
|
}
|
|
71
|
+
iconSetDiv.innerHTML = data;
|
|
41
72
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
73
|
+
async init() {
|
|
74
|
+
const { file: file, version: version } = this.#options;
|
|
75
|
+
try {
|
|
76
|
+
let data = await this.#fetchData(file);
|
|
77
|
+
const db = await $4fa36e821943b400$var$Iconly.#dbInstance;
|
|
78
|
+
const tx = db.transaction("icons", "readwrite");
|
|
79
|
+
const store = tx.objectStore("icons");
|
|
80
|
+
const dbVersion = await new Promise((resolve, reject)=>{
|
|
81
|
+
const request = store.get(version);
|
|
82
|
+
request.onsuccess = ()=>resolve(request.result);
|
|
83
|
+
request.onerror = ()=>reject(request.error);
|
|
84
|
+
});
|
|
85
|
+
if (!(dbVersion && dbVersion.data)) await new Promise((resolve, reject)=>{
|
|
86
|
+
const request = store.put({
|
|
87
|
+
version: version,
|
|
88
|
+
data: data
|
|
89
|
+
});
|
|
90
|
+
request.onsuccess = ()=>resolve();
|
|
91
|
+
request.onerror = ()=>reject(request.error);
|
|
47
92
|
});
|
|
93
|
+
else data = dbVersion.data;
|
|
94
|
+
await tx.complete;
|
|
95
|
+
await this.#insert(data);
|
|
96
|
+
} catch (error) {
|
|
97
|
+
this.#logError("Error initializing Iconly:", error);
|
|
48
98
|
}
|
|
49
99
|
}
|
|
100
|
+
#logError(...messages) {
|
|
101
|
+
if (this.#options.debug) console.error(...messages);
|
|
102
|
+
}
|
|
50
103
|
}
|
|
104
|
+
var $4fa36e821943b400$export$2e2bcd8739ae039 = $4fa36e821943b400$var$Iconly;
|
|
51
105
|
|
|
52
106
|
|
|
53
107
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["src/index.js"],"sourcesContent":["class Iconly {\r\n\tstatic #dbInstance;\r\n\r\n\t#options;\r\n\r\n\t#container;\r\n\r\n\tconstructor(options) {\r\n\t\tthis.#options = {\r\n\t\t\tfile: './icons.svg',\r\n\t\t\tversion: '1.0',\r\n\t\t\tdebug: false,\r\n\t\t\tcontainer: document.body || document.documentElement,\r\n\t\t\t...options\r\n\t\t};\r\n\t\tthis.#container = typeof this.#options.container === 'string' ? document.querySelector(this.#options.container) : this.#options.container;\r\n\r\n\t\tif (!Iconly.#dbInstance) {\r\n\t\t\tIconly.#dbInstance = this.#openDB('iconlyDB', 1);\r\n\t\t}\r\n\t}\r\n\r\n\tasync #openDB(name, version) {\r\n\t\tif (!('indexedDB' in window)) {\r\n\t\t\tthis.#logError('This browser doesn\\'t support IndexedDB');\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tlet db;\r\n\r\n\t\ttry {\r\n\t\t\tdb = await new Promise((resolve, reject) => {\r\n\t\t\t\tconst request = indexedDB.open(name, version);\r\n\r\n\t\t\t\trequest.onerror = () => reject(`IndexedDB error: ${request.error}`);\r\n\t\t\t\trequest.onupgradeneeded = (event) => {\r\n\t\t\t\t\tconst db = event.target.result;\r\n\t\t\t\t\tif (!db.objectStoreNames.contains('icons')) {\r\n\t\t\t\t\t\tdb.createObjectStore('icons', { keyPath: 'version' });\r\n\t\t\t\t\t}\r\n\t\t\t\t};\r\n\t\t\t\trequest.onsuccess = () => resolve(request.result);\r\n\t\t\t});\r\n\t\t} catch (error) {\r\n\t\t\tthis.#logError(error);\r\n\r\n\t\t\tthrow error;\r\n\t\t}\r\n\t\treturn db;\r\n\t}\r\n\r\n\tasync #fetchData(file) {\r\n\t\ttry {\r\n\t\t\tconst response = await fetch(file);\r\n\r\n\t\t\tif (!response.ok) throw new Error('Network response was not ok');\r\n\r\n\t\t\treturn response.text();\r\n\t\t} catch (error) {\r\n\t\t\tthis.#logError(error);\r\n\r\n\t\t\tthrow error;\r\n\t\t}\r\n\t}\r\n\r\n\tasync #insert(data) {\r\n\t\tlet iconSetDiv = document.getElementById('iconset');\r\n\r\n\t\tif (!iconSetDiv) {\r\n\t\t\ticonSetDiv = document.createElement('div');\r\n\t\t\ticonSetDiv.id = 'iconset';\r\n\t\t\ticonSetDiv.setAttribute('aria-hidden', 'true');\r\n\t\t\ticonSetDiv.style.cssText = 'width: 0; height: 0; position: absolute;';\r\n\r\n\t\t\tthis.#container.appendChild(iconSetDiv);\r\n\t\t}\r\n\r\n\t\ticonSetDiv.innerHTML = data;\r\n\t}\r\n\r\n\tasync init() {\r\n\t\tconst { file, version } = this.#options;\r\n\r\n\t\ttry {\r\n\t\t\tlet data = await this.#fetchData(file);\r\n\r\n\t\t\tconst db = await Iconly.#dbInstance;\r\n\t\t\tconst tx = db.transaction('icons', 'readwrite');\r\n\t\t\tconst store = tx.objectStore('icons');\r\n\r\n\t\t\tconst dbVersion = await new Promise((resolve, reject) => {\r\n\t\t\t\tconst request = store.get(version);\r\n\r\n\t\t\t\trequest.onsuccess = () => resolve(request.result);\r\n\t\t\t\trequest.onerror = () => reject(request.error);\r\n\t\t\t});\r\n\r\n\t\t\tif (!(dbVersion && dbVersion.data)) {\r\n\t\t\t\tawait new Promise((resolve, reject) => {\r\n\t\t\t\t\tconst request = store.put({ version, data });\r\n\r\n\t\t\t\t\trequest.onsuccess = () => resolve();\r\n\t\t\t\t\trequest.onerror = () => reject(request.error);\r\n\t\t\t\t});\r\n\t\t\t} else {\r\n\t\t\t\tdata = dbVersion.data;\r\n\t\t\t}\r\n\r\n\t\t\tawait tx.complete;\r\n\t\t\tawait this.#insert(data);\r\n\t\t} catch (error) {\r\n\t\t\tthis.#logError('Error initializing Iconly:', error);\r\n\t\t}\r\n\t}\r\n\r\n\t#logError(...messages) {\r\n\t\tif (this.#options.debug) {\r\n\t\t\tconsole.error(...messages);\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport default Iconly;\r\n"],"names":[],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,43 +1,95 @@
|
|
|
1
|
-
class $cf838c15c8b009ba$
|
|
1
|
+
class $cf838c15c8b009ba$var$Iconly {
|
|
2
|
+
static #dbInstance;
|
|
3
|
+
#options;
|
|
4
|
+
#container;
|
|
2
5
|
constructor(options){
|
|
3
|
-
this
|
|
6
|
+
this.#options = {
|
|
4
7
|
file: "./icons.svg",
|
|
8
|
+
version: "1.0",
|
|
9
|
+
debug: false,
|
|
10
|
+
container: document.body || document.documentElement,
|
|
5
11
|
...options
|
|
6
12
|
};
|
|
7
|
-
this
|
|
8
|
-
|
|
9
|
-
this.init().then();
|
|
13
|
+
this.#container = typeof this.#options.container === "string" ? document.querySelector(this.#options.container) : this.#options.container;
|
|
14
|
+
if (!$cf838c15c8b009ba$var$Iconly.#dbInstance) $cf838c15c8b009ba$var$Iconly.#dbInstance = this.#openDB("iconlyDB", 1);
|
|
10
15
|
}
|
|
11
|
-
async
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
16
|
+
async #openDB(name, version) {
|
|
17
|
+
if (!("indexedDB" in window)) {
|
|
18
|
+
this.#logError("This browser doesn't support IndexedDB");
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
let db;
|
|
22
|
+
try {
|
|
23
|
+
db = await new Promise((resolve, reject)=>{
|
|
24
|
+
const request = indexedDB.open(name, version);
|
|
25
|
+
request.onerror = ()=>reject(`IndexedDB error: ${request.error}`);
|
|
26
|
+
request.onupgradeneeded = (event)=>{
|
|
27
|
+
const db = event.target.result;
|
|
28
|
+
if (!db.objectStoreNames.contains("icons")) db.createObjectStore("icons", {
|
|
29
|
+
keyPath: "version"
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
request.onsuccess = ()=>resolve(request.result);
|
|
33
|
+
});
|
|
34
|
+
} catch (error) {
|
|
35
|
+
this.#logError(error);
|
|
36
|
+
throw error;
|
|
37
|
+
}
|
|
38
|
+
return db;
|
|
39
|
+
}
|
|
40
|
+
async #fetchData(file) {
|
|
41
|
+
try {
|
|
26
42
|
const response = await fetch(file);
|
|
27
43
|
if (!response.ok) throw new Error("Network response was not ok");
|
|
28
|
-
|
|
29
|
-
|
|
44
|
+
return response.text();
|
|
45
|
+
} catch (error) {
|
|
46
|
+
this.#logError(error);
|
|
47
|
+
throw error;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
async #insert(data) {
|
|
51
|
+
let iconSetDiv = document.getElementById("iconset");
|
|
52
|
+
if (!iconSetDiv) {
|
|
53
|
+
iconSetDiv = document.createElement("div");
|
|
54
|
+
iconSetDiv.id = "iconset";
|
|
55
|
+
iconSetDiv.setAttribute("aria-hidden", "true");
|
|
56
|
+
iconSetDiv.style.cssText = "width: 0; height: 0; position: absolute;";
|
|
57
|
+
this.#container.appendChild(iconSetDiv);
|
|
30
58
|
}
|
|
59
|
+
iconSetDiv.innerHTML = data;
|
|
31
60
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
61
|
+
async init() {
|
|
62
|
+
const { file: file, version: version } = this.#options;
|
|
63
|
+
try {
|
|
64
|
+
let data = await this.#fetchData(file);
|
|
65
|
+
const db = await $cf838c15c8b009ba$var$Iconly.#dbInstance;
|
|
66
|
+
const tx = db.transaction("icons", "readwrite");
|
|
67
|
+
const store = tx.objectStore("icons");
|
|
68
|
+
const dbVersion = await new Promise((resolve, reject)=>{
|
|
69
|
+
const request = store.get(version);
|
|
70
|
+
request.onsuccess = ()=>resolve(request.result);
|
|
71
|
+
request.onerror = ()=>reject(request.error);
|
|
72
|
+
});
|
|
73
|
+
if (!(dbVersion && dbVersion.data)) await new Promise((resolve, reject)=>{
|
|
74
|
+
const request = store.put({
|
|
75
|
+
version: version,
|
|
76
|
+
data: data
|
|
77
|
+
});
|
|
78
|
+
request.onsuccess = ()=>resolve();
|
|
79
|
+
request.onerror = ()=>reject(request.error);
|
|
37
80
|
});
|
|
81
|
+
else data = dbVersion.data;
|
|
82
|
+
await tx.complete;
|
|
83
|
+
await this.#insert(data);
|
|
84
|
+
} catch (error) {
|
|
85
|
+
this.#logError("Error initializing Iconly:", error);
|
|
38
86
|
}
|
|
39
87
|
}
|
|
88
|
+
#logError(...messages) {
|
|
89
|
+
if (this.#options.debug) console.error(...messages);
|
|
90
|
+
}
|
|
40
91
|
}
|
|
92
|
+
var $cf838c15c8b009ba$export$2e2bcd8739ae039 = $cf838c15c8b009ba$var$Iconly;
|
|
41
93
|
|
|
42
94
|
|
|
43
95
|
export {$cf838c15c8b009ba$export$2e2bcd8739ae039 as default};
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["src/index.js"],"sourcesContent":["class Iconly {\r\n\tstatic #dbInstance;\r\n\r\n\t#options;\r\n\r\n\t#container;\r\n\r\n\tconstructor(options) {\r\n\t\tthis.#options = {\r\n\t\t\tfile: './icons.svg',\r\n\t\t\tversion: '1.0',\r\n\t\t\tdebug: false,\r\n\t\t\tcontainer: document.body || document.documentElement,\r\n\t\t\t...options\r\n\t\t};\r\n\t\tthis.#container = typeof this.#options.container === 'string' ? document.querySelector(this.#options.container) : this.#options.container;\r\n\r\n\t\tif (!Iconly.#dbInstance) {\r\n\t\t\tIconly.#dbInstance = this.#openDB('iconlyDB', 1);\r\n\t\t}\r\n\t}\r\n\r\n\tasync #openDB(name, version) {\r\n\t\tif (!('indexedDB' in window)) {\r\n\t\t\tthis.#logError('This browser doesn\\'t support IndexedDB');\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tlet db;\r\n\r\n\t\ttry {\r\n\t\t\tdb = await new Promise((resolve, reject) => {\r\n\t\t\t\tconst request = indexedDB.open(name, version);\r\n\r\n\t\t\t\trequest.onerror = () => reject(`IndexedDB error: ${request.error}`);\r\n\t\t\t\trequest.onupgradeneeded = (event) => {\r\n\t\t\t\t\tconst db = event.target.result;\r\n\t\t\t\t\tif (!db.objectStoreNames.contains('icons')) {\r\n\t\t\t\t\t\tdb.createObjectStore('icons', { keyPath: 'version' });\r\n\t\t\t\t\t}\r\n\t\t\t\t};\r\n\t\t\t\trequest.onsuccess = () => resolve(request.result);\r\n\t\t\t});\r\n\t\t} catch (error) {\r\n\t\t\tthis.#logError(error);\r\n\r\n\t\t\tthrow error;\r\n\t\t}\r\n\t\treturn db;\r\n\t}\r\n\r\n\tasync #fetchData(file) {\r\n\t\ttry {\r\n\t\t\tconst response = await fetch(file);\r\n\r\n\t\t\tif (!response.ok) throw new Error('Network response was not ok');\r\n\r\n\t\t\treturn response.text();\r\n\t\t} catch (error) {\r\n\t\t\tthis.#logError(error);\r\n\r\n\t\t\tthrow error;\r\n\t\t}\r\n\t}\r\n\r\n\tasync #insert(data) {\r\n\t\tlet iconSetDiv = document.getElementById('iconset');\r\n\r\n\t\tif (!iconSetDiv) {\r\n\t\t\ticonSetDiv = document.createElement('div');\r\n\t\t\ticonSetDiv.id = 'iconset';\r\n\t\t\ticonSetDiv.setAttribute('aria-hidden', 'true');\r\n\t\t\ticonSetDiv.style.cssText = 'width: 0; height: 0; position: absolute;';\r\n\r\n\t\t\tthis.#container.appendChild(iconSetDiv);\r\n\t\t}\r\n\r\n\t\ticonSetDiv.innerHTML = data;\r\n\t}\r\n\r\n\tasync init() {\r\n\t\tconst { file, version } = this.#options;\r\n\r\n\t\ttry {\r\n\t\t\tlet data = await this.#fetchData(file);\r\n\r\n\t\t\tconst db = await Iconly.#dbInstance;\r\n\t\t\tconst tx = db.transaction('icons', 'readwrite');\r\n\t\t\tconst store = tx.objectStore('icons');\r\n\r\n\t\t\tconst dbVersion = await new Promise((resolve, reject) => {\r\n\t\t\t\tconst request = store.get(version);\r\n\r\n\t\t\t\trequest.onsuccess = () => resolve(request.result);\r\n\t\t\t\trequest.onerror = () => reject(request.error);\r\n\t\t\t});\r\n\r\n\t\t\tif (!(dbVersion && dbVersion.data)) {\r\n\t\t\t\tawait new Promise((resolve, reject) => {\r\n\t\t\t\t\tconst request = store.put({ version, data });\r\n\r\n\t\t\t\t\trequest.onsuccess = () => resolve();\r\n\t\t\t\t\trequest.onerror = () => reject(request.error);\r\n\t\t\t\t});\r\n\t\t\t} else {\r\n\t\t\t\tdata = dbVersion.data;\r\n\t\t\t}\r\n\r\n\t\t\tawait tx.complete;\r\n\t\t\tawait this.#insert(data);\r\n\t\t} catch (error) {\r\n\t\t\tthis.#logError('Error initializing Iconly:', error);\r\n\t\t}\r\n\t}\r\n\r\n\t#logError(...messages) {\r\n\t\tif (this.#options.debug) {\r\n\t\t\tconsole.error(...messages);\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport default Iconly;\r\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.4.0",
|
|
4
4
|
"description": "SVG Sprite",
|
|
5
5
|
"author": "ux-ui.pro",
|
|
6
6
|
"license": "MIT",
|
|
@@ -11,22 +11,32 @@
|
|
|
11
11
|
"bugs": {
|
|
12
12
|
"url": "https://github.com/ux-ui-pro/iconly/issues"
|
|
13
13
|
},
|
|
14
|
-
"source": "src/index.js",
|
|
15
14
|
"main": "dist/index.js",
|
|
16
15
|
"module": "dist/index.module.js",
|
|
16
|
+
"targets": {
|
|
17
|
+
"main": {
|
|
18
|
+
"source": "src/index.js"
|
|
19
|
+
},
|
|
20
|
+
"module": {
|
|
21
|
+
"source": "src/index.js"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
17
24
|
"scripts": {
|
|
18
|
-
"
|
|
19
|
-
"build": "parcel build",
|
|
20
|
-
"
|
|
25
|
+
"clean": "rm -rf dist .parcel-cache",
|
|
26
|
+
"build": "yarn clean && parcel build",
|
|
27
|
+
"lint:js": "eslint --ext .js",
|
|
28
|
+
"lintfix": "yarn lint:js --fix"
|
|
21
29
|
},
|
|
22
30
|
"devDependencies": {
|
|
23
|
-
"
|
|
31
|
+
"eslint": "^7.32.0 || ^8.56.0",
|
|
32
|
+
"eslint-config-airbnb-base": "^15.0.0",
|
|
33
|
+
"parcel": "^2.11.0"
|
|
24
34
|
},
|
|
25
35
|
"keywords": [
|
|
26
36
|
"svg",
|
|
27
37
|
"icon",
|
|
28
38
|
"icons",
|
|
29
39
|
"sprite",
|
|
30
|
-
"
|
|
40
|
+
"IndexedDB"
|
|
31
41
|
]
|
|
32
|
-
}
|
|
42
|
+
}
|
package/src/index.js
CHANGED
|
@@ -1,52 +1,123 @@
|
|
|
1
|
-
|
|
1
|
+
class Iconly {
|
|
2
|
+
static #dbInstance;
|
|
3
|
+
|
|
4
|
+
#options;
|
|
5
|
+
|
|
6
|
+
#container;
|
|
7
|
+
|
|
2
8
|
constructor(options) {
|
|
3
|
-
this
|
|
4
|
-
|
|
5
|
-
|
|
9
|
+
this.#options = {
|
|
10
|
+
file: './icons.svg',
|
|
11
|
+
version: '1.0',
|
|
12
|
+
debug: false,
|
|
13
|
+
container: document.body || document.documentElement,
|
|
14
|
+
...options
|
|
15
|
+
};
|
|
16
|
+
this.#container = typeof this.#options.container === 'string' ? document.querySelector(this.#options.container) : this.#options.container;
|
|
6
17
|
|
|
7
|
-
|
|
18
|
+
if (!Iconly.#dbInstance) {
|
|
19
|
+
Iconly.#dbInstance = this.#openDB('iconlyDB', 1);
|
|
20
|
+
}
|
|
8
21
|
}
|
|
9
22
|
|
|
10
|
-
async
|
|
11
|
-
|
|
23
|
+
async #openDB(name, version) {
|
|
24
|
+
if (!('indexedDB' in window)) {
|
|
25
|
+
this.#logError('This browser doesn\'t support IndexedDB');
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
12
28
|
|
|
13
|
-
|
|
14
|
-
const storedSize = localStorage.getItem('inlineSVGsize')
|
|
15
|
-
const storedData = localStorage.getItem('inlineSVGdata')
|
|
16
|
-
const response = await fetch(file)
|
|
29
|
+
let db;
|
|
17
30
|
|
|
18
|
-
|
|
31
|
+
try {
|
|
32
|
+
db = await new Promise((resolve, reject) => {
|
|
33
|
+
const request = indexedDB.open(name, version);
|
|
19
34
|
|
|
20
|
-
|
|
35
|
+
request.onerror = () => reject(`IndexedDB error: ${request.error}`);
|
|
36
|
+
request.onupgradeneeded = (event) => {
|
|
37
|
+
const db = event.target.result;
|
|
38
|
+
if (!db.objectStoreNames.contains('icons')) {
|
|
39
|
+
db.createObjectStore('icons', { keyPath: 'version' });
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
request.onsuccess = () => resolve(request.result);
|
|
43
|
+
});
|
|
44
|
+
} catch (error) {
|
|
45
|
+
this.#logError(error);
|
|
21
46
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
47
|
+
throw error;
|
|
48
|
+
}
|
|
49
|
+
return db;
|
|
50
|
+
}
|
|
26
51
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
52
|
+
async #fetchData(file) {
|
|
53
|
+
try {
|
|
54
|
+
const response = await fetch(file);
|
|
55
|
+
|
|
56
|
+
if (!response.ok) throw new Error('Network response was not ok');
|
|
57
|
+
|
|
58
|
+
return response.text();
|
|
59
|
+
} catch (error) {
|
|
60
|
+
this.#logError(error);
|
|
61
|
+
|
|
62
|
+
throw error;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
32
65
|
|
|
33
|
-
|
|
66
|
+
async #insert(data) {
|
|
67
|
+
let iconSetDiv = document.getElementById('iconset');
|
|
34
68
|
|
|
35
|
-
|
|
69
|
+
if (!iconSetDiv) {
|
|
70
|
+
iconSetDiv = document.createElement('div');
|
|
71
|
+
iconSetDiv.id = 'iconset';
|
|
72
|
+
iconSetDiv.setAttribute('aria-hidden', 'true');
|
|
73
|
+
iconSetDiv.style.cssText = 'width: 0; height: 0; position: absolute;';
|
|
36
74
|
|
|
37
|
-
this.
|
|
75
|
+
this.#container.appendChild(iconSetDiv);
|
|
38
76
|
}
|
|
77
|
+
|
|
78
|
+
iconSetDiv.innerHTML = data;
|
|
39
79
|
}
|
|
40
80
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
81
|
+
async init() {
|
|
82
|
+
const { file, version } = this.#options;
|
|
83
|
+
|
|
84
|
+
try {
|
|
85
|
+
let data = await this.#fetchData(file);
|
|
86
|
+
|
|
87
|
+
const db = await Iconly.#dbInstance;
|
|
88
|
+
const tx = db.transaction('icons', 'readwrite');
|
|
89
|
+
const store = tx.objectStore('icons');
|
|
90
|
+
|
|
91
|
+
const dbVersion = await new Promise((resolve, reject) => {
|
|
92
|
+
const request = store.get(version);
|
|
93
|
+
|
|
94
|
+
request.onsuccess = () => resolve(request.result);
|
|
95
|
+
request.onerror = () => reject(request.error);
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
if (!(dbVersion && dbVersion.data)) {
|
|
99
|
+
await new Promise((resolve, reject) => {
|
|
100
|
+
const request = store.put({ version, data });
|
|
101
|
+
|
|
102
|
+
request.onsuccess = () => resolve();
|
|
103
|
+
request.onerror = () => reject(request.error);
|
|
104
|
+
});
|
|
45
105
|
} else {
|
|
46
|
-
|
|
47
|
-
this.body.insertAdjacentHTML('beforeend', data)
|
|
48
|
-
})
|
|
106
|
+
data = dbVersion.data;
|
|
49
107
|
}
|
|
108
|
+
|
|
109
|
+
await tx.complete;
|
|
110
|
+
await this.#insert(data);
|
|
111
|
+
} catch (error) {
|
|
112
|
+
this.#logError('Error initializing Iconly:', error);
|
|
50
113
|
}
|
|
51
114
|
}
|
|
52
|
-
|
|
115
|
+
|
|
116
|
+
#logError(...messages) {
|
|
117
|
+
if (this.#options.debug) {
|
|
118
|
+
console.error(...messages);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
export default Iconly;
|
package/src/sprite.svg
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<svg id="
|
|
1
|
+
<svg id="sprite" preserveAspectRatio="none" fill="none">
|
|
2
2
|
<symbol id="i-dangerous" viewBox="0 0 24 24">
|
|
3
3
|
<path d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"/>
|
|
4
4
|
</symbol>
|
|
@@ -14,4 +14,4 @@
|
|
|
14
14
|
<symbol id="i-phone" viewBox="0 0 24 24">
|
|
15
15
|
<path d="M12.88 5.05c3.18.4 5.67 2.89 6.07 6.07.06.51.49.88.99.88.04 0 .08 0 .12-.01.55-.07.94-.57.87-1.12-.51-4.09-3.72-7.3-7.81-7.81-.55-.06-1.05.33-1.11.88-.07.55.32 1.05.87 1.11zm.38 2.11c-.53-.14-1.08.18-1.22.72s.18 1.08.72 1.22c1.05.27 1.87 1.09 2.15 2.15.12.45.52.75.97.75.08 0 .17-.01.25-.03.53-.14.85-.69.72-1.22-.47-1.77-1.84-3.14-3.59-3.59zm5.97 8.1l-2.54-.29c-.61-.07-1.21.14-1.64.57l-1.84 1.84c-2.83-1.44-5.15-3.75-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.64l-.29-2.52c-.12-1.01-.97-1.77-1.99-1.77H5.03c-1.13 0-2.07.94-2 2.07.53 8.54 7.36 15.36 15.89 15.89 1.13.07 2.07-.87 2.07-2v-1.73c.01-1.01-.75-1.86-1.76-1.98z"/>
|
|
16
16
|
</symbol>
|
|
17
|
-
</svg>
|
|
17
|
+
</svg>
|