oppi.li
convert to mask based icon
REVERTED
src/styles/index.css
REVERTED
src/styles/index.css
···
14
14
}
15
15
16
16
.i-lucide-line-squiggle {
17
+
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxpbmUtc3F1aWdnbGUtaWNvbiBsdWNpZGUtbGluZS1zcXVpZ2dsZSI+PHBhdGggZD0iTTcgMy41YzUtMiA3IDIuNSAzIDRDMS41IDEwIDIgMTUgNSAxNmM1IDIgOS0xMCAxNC03cy41IDEzLjUtNCAxMmMtNS0yLjUuNS0xMSA2LTIiLz48L3N2Zz4=")
18
+
no-repeat;
19
+
background-size: 100% 100%;
20
+
background-color: transparent;
17
-
--un-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5c5-2 7 2.5 3 4C1.5 10 2 15 5 16c5 2 9-10 14-7s.5 13.5-4 12c-5-2.5.5-11 6-2'/%3E%3C/svg%3E");
18
-
-webkit-mask: var(--un-icon) no-repeat;
19
-
mask: var(--un-icon) no-repeat;
20
-
-webkit-mask-size: 100% 100%;
21
-
mask-size: 100% 100%;
22
-
background-color: currentColor;
23
21
width: 1em;
24
22
height: 1em;
25
23
}
NEW
README.md
NEW
README.md
···
2
2
3
3
Navigate and manage [atproto](https://atproto.com/) repositories and the records they contain, as well as watching the relay in real time (firehose + jetstream support).
4
4
5
+
### Hacking
6
+
7
+
You will need `node`, `pnpm` and `tsc` to get started:
8
+
9
+
```
10
+
pnpm i # install deps
11
+
pnpm run dev # or pnpm run start, runs vite
12
+
pnpm run build # runs vite build
13
+
pnpm run serve # runs vite preview
14
+
```
15
+
5
16
### Credits
6
17
7
18
[atcute](https://github.com/mary-ext/atcute) - atproto SDK\