@hackthedev/icons 1.0.0 → 1.0.2
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 +7 -2
- package/README.md +23 -0
- package/package.json +1 -1
package/Icons.js
CHANGED
|
@@ -4,10 +4,15 @@ class Icon {
|
|
|
4
4
|
edit: `<svg class="svg-icon" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm2.92 2.33H5v-.92L14.06 7.5l.92.92L5.92 19.58zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>`,
|
|
5
5
|
pin: `<svg class="svg-icon" viewBox="0 0 24 24"><path d="M16 9V3H8v6l-2 4v2h6v7l2-7h4v-2l-2-4z"/></svg>`,
|
|
6
6
|
unpin: `<svg class="svg-icon" viewBox="0 0 24 24"><path d="M3 5.27 4.28 4l15.5 15.5L18.5 21l-6.5-6.5L9 21v-7H5v-2l2-4V5h1.73L3 5.27zM16 9l2 4v2h-2.73l-5-5H16V3h-2v4h2v2z"/></svg>`,
|
|
7
|
-
del: `<svg class="svg-icon" viewBox="0 0 24 24"><path d="M6 7h12v2H6V7zm2 3h8l-1 9H9L8 10zm3-6h2l1 1h4v2H6V5h4l1-1z"/></svg
|
|
7
|
+
del: `<svg class="svg-icon" viewBox="0 0 24 24"><path d="M6 7h12v2H6V7zm2 3h8l-1 9H9L8 10zm3-6h2l1 1h4v2H6V5h4l1-1z"/></svg>`,
|
|
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
|
+
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
|
+
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
|
+
circle-x: `<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>`,
|
|
8
13
|
};
|
|
9
14
|
|
|
10
|
-
static fallback = "
|
|
15
|
+
static fallback = "circle-x";
|
|
11
16
|
|
|
12
17
|
static display(name) {
|
|
13
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
|
+
|