@hackthedev/icons 1.0.1 → 1.0.3
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/Icons.js +3 -1
- package/README.md +23 -0
- package/package.json +1 -1
package/Icons.js
CHANGED
|
@@ -8,9 +8,11 @@ class Icon {
|
|
|
8
8
|
clock: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock3-icon lucide-clock-3"><circle cx="12" cy="12" r="10"/><path d="M12 6v6h4"/></svg>`,
|
|
9
9
|
tag: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tags-icon lucide-tags"><path d="M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"/><path d="M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"/><circle cx="10.5" cy="6.5" r=".5" fill="currentColor"/></svg>`,
|
|
10
10
|
server: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server-icon lucide-server"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>`,
|
|
11
|
+
account: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-round-icon lucide-circle-user-round"><path d="M17.925 20.056a6 6 0 0 0-11.851.001"/><circle cx="12" cy="11" r="4"/><circle cx="12" cy="12" r="10"/></svg>`,
|
|
12
|
+
circlex: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x-icon lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`,
|
|
11
13
|
};
|
|
12
14
|
|
|
13
|
-
static fallback = "
|
|
15
|
+
static fallback = "circlex";
|
|
14
16
|
|
|
15
17
|
static display(name) {
|
|
16
18
|
return this.icon_list[name] || this.icon_list[this.fallback];
|
package/README.md
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# Icons Lib
|
|
2
|
+
|
|
3
|
+
This small library is a collection of icons in svg format. These icons are mostly from if not all of them https://lucide.dev/. Icons can be displayed using `Icon.display("server")`.
|
|
4
|
+
|
|
5
|
+
Example:
|
|
6
|
+
|
|
7
|
+
```js
|
|
8
|
+
async function buildNavHTML(){
|
|
9
|
+
getNavElement().innerHTML =
|
|
10
|
+
`
|
|
11
|
+
<div class="entry">
|
|
12
|
+
${Icon.display("server")}
|
|
13
|
+
<p>Servers</p>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div class="entry">
|
|
17
|
+
${Icon.display("edit")}
|
|
18
|
+
<p>Account</p>
|
|
19
|
+
</div>
|
|
20
|
+
`;
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|