handy online tools for AT Protocol
boat.kelinci.net
atproto
bluesky
atcute
typescript
solidjs
refactor: redo icons
+76
-99
+5
-58
src/components/ic-icons/_icon.tsx
+5
-58
src/components/ic-icons/_icon.tsx
···
1
-
import { type ComponentProps } from 'solid-js';
2
-
import { spread, template } from 'solid-js/web';
3
-
4
-
const SVG_NS = 'http://www.w3.org/2000/svg';
5
-
const ICON_NS = 'icons';
6
-
7
-
let uid = 0;
8
-
let defs: SVGDefsElement;
9
-
10
-
interface PathAttrs {
11
-
fill?: 'currentColor' | (string & {});
12
-
'fill-rule'?: 'evenodd' | (string & {});
13
-
}
14
-
15
-
type PathDef = [d: string, attrs?: PathAttrs];
16
-
17
-
const DEFAULT_ATTRS: PathAttrs = {
18
-
fill: 'currentColor',
19
-
};
20
-
21
-
const pushIcon = (paths: PathDef[]) => {
22
-
const id = ICON_NS + uid++;
23
-
const symbol = document.createElementNS(SVG_NS, 'symbol');
24
-
25
-
symbol.id = id;
26
-
27
-
for (let idx = 0, len = paths.length; idx < len; idx++) {
28
-
const path = paths[idx];
29
-
30
-
const d = path[0];
31
-
const attrs = path[1] ?? DEFAULT_ATTRS;
32
-
33
-
const node = document.createElementNS(SVG_NS, 'path');
34
-
node.setAttribute('d', d);
35
-
36
-
for (const key in attrs) {
37
-
// @ts-expect-error
38
-
const val = attrs[key];
39
-
node.setAttribute(key, val);
40
-
}
41
-
42
-
symbol.appendChild(node);
43
-
}
44
-
45
-
if (!defs) {
46
-
const svg = document.head.appendChild(document.createElementNS(SVG_NS, 'svg'));
47
-
svg.appendChild((defs = document.createElementNS(SVG_NS, 'defs')));
48
-
}
49
-
50
-
defs.appendChild(symbol);
51
-
52
-
return id;
53
-
};
1
+
import { type ComponentProps, type JSX } from 'solid-js';
2
+
import { spread } from 'solid-js/web';
54
3
55
4
/*#__NO_SIDE_EFFECTS__*/
56
-
export const createIcon = (paths: PathDef[], viewBox = '0 0 24 24') => {
57
-
const href = '#' + pushIcon(paths);
58
-
59
-
const tmpl = template(`<svg height=1em width=1em viewBox="${viewBox}"><use href=${href}>`);
60
-
return Icon.bind(tmpl);
5
+
export const createIcon = (path: () => JSX.Element) => {
6
+
// @ts-expect-error
7
+
return Icon.bind(path);
61
8
};
62
9
63
10
function Icon(this: () => Element, props: ComponentProps<'svg'>) {
+5
-1
src/components/ic-icons/baseline-check.tsx
+5
-1
src/components/ic-icons/baseline-check.tsx
···
1
1
import { createIcon } from './_icon';
2
2
3
-
const CheckIcon = createIcon([['M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z']]);
3
+
const CheckIcon = createIcon(() => (
4
+
<svg width="1em" height="1em" viewBox="0 0 24 24">
5
+
<path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z" />
6
+
</svg>
7
+
));
4
8
5
9
export default CheckIcon;
+8
-5
src/components/ic-icons/baseline-content-copy.tsx
+8
-5
src/components/ic-icons/baseline-content-copy.tsx
···
1
1
import { createIcon } from './_icon';
2
2
3
-
const ContentCopyIcon = createIcon([
4
-
[
5
-
'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z',
6
-
],
7
-
]);
3
+
const ContentCopyIcon = createIcon(() => (
4
+
<svg width="1em" height="1em" viewBox="0 0 24 24">
5
+
<path
6
+
fill="currentColor"
7
+
d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
8
+
/>
9
+
</svg>
10
+
));
8
11
9
12
export default ContentCopyIcon;
+8
-5
src/components/ic-icons/baseline-history.tsx
+8
-5
src/components/ic-icons/baseline-history.tsx
···
1
1
import { createIcon } from './_icon';
2
2
3
-
const HistoryIcon = createIcon([
4
-
[
5
-
'M13 3a9 9 0 0 0-9 9H1l3.89 3.89l.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54l.72-1.21l-3.5-2.08V8H12z',
6
-
],
7
-
]);
3
+
const HistoryIcon = createIcon(() => (
4
+
<svg width="1em" height="1em" viewBox="0 0 24 24">
5
+
<path
6
+
fill="currentColor"
7
+
d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89l.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.95 8.95 0 0 0 13 21a9 9 0 0 0 0-18m-1 5v5l4.28 2.54l.72-1.21l-3.5-2.08V8z"
8
+
/>
9
+
</svg>
10
+
));
8
11
9
12
export default HistoryIcon;
+8
-5
src/components/ic-icons/outline-archive.tsx
+8
-5
src/components/ic-icons/outline-archive.tsx
···
1
1
import { createIcon } from './_icon';
2
2
3
-
const ArchiveOutlinedIcon = createIcon([
4
-
[
5
-
'm20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27M6.24 5h11.52l.81.97H5.44zM5 19V8h14v11zm8.45-9h-2.9v3H8l4 4l4-4h-2.55z',
6
-
],
7
-
]);
3
+
const ArchiveOutlinedIcon = createIcon(() => (
4
+
<svg width="1em" height="1em" viewBox="0 0 24 24">
5
+
<path
6
+
fill="currentColor"
7
+
d="m20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27M6.24 5h11.52l.81.97H5.44zM5 19V8h14v11zm8.45-9h-2.9v3H8l4 4l4-4h-2.55z"
8
+
/>
9
+
</svg>
10
+
));
8
11
9
12
export default ArchiveOutlinedIcon;
+8
-5
src/components/ic-icons/outline-bookmarks.tsx
+8
-5
src/components/ic-icons/outline-bookmarks.tsx
···
1
1
import { createIcon } from './_icon';
2
2
3
-
const BookmarksOutlinedIcon = createIcon([
4
-
[
5
-
'M15 7v12.97l-4.21-1.81l-.79-.34l-.79.34L5 19.97V7zm4-6H8.99C7.89 1 7 1.9 7 3h10c1.1 0 2 .9 2 2v13l2 1V3c0-1.1-.9-2-2-2m-4 4H5c-1.1 0-2 .9-2 2v16l7-3l7 3V7c0-1.1-.9-2-2-2',
6
-
],
7
-
]);
3
+
const BookmarksOutlinedIcon = createIcon(() => (
4
+
<svg width="1em" height="1em" viewBox="0 0 24 24">
5
+
<path
6
+
fill="currentColor"
7
+
d="M15 7v12.97l-4.21-1.81l-.79-.34l-.79.34L5 19.97V7zm4-6H8.99C7.89 1 7 1.9 7 3h10c1.1 0 2 .9 2 2v13l2 1V3c0-1.1-.9-2-2-2m-4 4H5c-1.1 0-2 .9-2 2v16l7-3l7 3V7c0-1.1-.9-2-2-2"
8
+
/>
9
+
</svg>
10
+
));
8
11
9
12
export default BookmarksOutlinedIcon;
+10
-5
src/components/ic-icons/outline-directions-car.tsx
+10
-5
src/components/ic-icons/outline-directions-car.tsx
···
1
1
import { createIcon } from './_icon';
2
2
3
-
const DirectionsCarOutlinedIcon = createIcon([
4
-
[
5
-
'M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8zM6.85 7h10.29l1.08 3.11H5.77zM19 17H5v-5h14z',
6
-
],
7
-
]);
3
+
const DirectionsCarOutlinedIcon = createIcon(() => (
4
+
<svg width="1em" height="1em" viewBox="0 0 24 24">
5
+
<path
6
+
fill="currentColor"
7
+
d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8zM6.85 7h10.29l1.08 3.11H5.77zM19 17H5v-5h14z"
8
+
/>
9
+
<circle cx="7.5" cy="14.5" r="1.5" fill="currentColor" />
10
+
<circle cx="16.5" cy="14.5" r="1.5" fill="currentColor" />
11
+
</svg>
12
+
));
8
13
9
14
export default DirectionsCarOutlinedIcon;
+8
-5
src/components/ic-icons/outline-explore.tsx
+8
-5
src/components/ic-icons/outline-explore.tsx
···
1
1
import { createIcon } from './_icon';
2
2
3
-
const ExploreOutlinedIcon = createIcon([
4
-
[
5
-
'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m-5.5-2.5l7.51-3.49L17.5 6.5L9.99 9.99zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1s-1.1-.49-1.1-1.1s.49-1.1 1.1-1.1',
6
-
],
7
-
]);
3
+
const ExploreOutlinedIcon = createIcon(() => (
4
+
<svg width="1em" height="1em" viewBox="0 0 24 24">
5
+
<path
6
+
fill="currentColor"
7
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m-5.5-2.5l7.51-3.49L17.5 6.5L9.99 9.99zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1s-1.1-.49-1.1-1.1s.49-1.1 1.1-1.1"
8
+
/>
9
+
</svg>
10
+
));
8
11
9
12
export default ExploreOutlinedIcon;
+8
-5
src/components/ic-icons/outline-move-up.tsx
+8
-5
src/components/ic-icons/outline-move-up.tsx
···
1
1
import { createIcon } from './_icon';
2
2
3
-
const MoveUpOutlinedIcon = createIcon([
4
-
[
5
-
'M3 13c0-2.45 1.76-4.47 4.08-4.91l-1.49 1.5L7 11l4-4.01L7 3L5.59 4.41l1.58 1.58v.06A7.007 7.007 0 0 0 1 13c0 3.87 3.13 7 7 7h3v-2H8c-2.76 0-5-2.24-5-5m10 0v7h9v-7zm7 5h-5v-3h5zM13 4h9v7h-9z',
6
-
],
7
-
]);
3
+
const MoveUpOutlinedIcon = createIcon(() => (
4
+
<svg width="1em" height="1em" viewBox="0 0 24 24">
5
+
<path
6
+
fill="currentColor"
7
+
d="M3 13c0-2.45 1.76-4.47 4.08-4.91l-1.49 1.5L7 11l4-4.01L7 3L5.59 4.41l1.58 1.58v.06A7.007 7.007 0 0 0 1 13c0 3.87 3.13 7 7 7h3v-2H8c-2.76 0-5-2.24-5-5m10 0v7h9v-7zm7 5h-5v-3h5zM13 4h9v7h-9z"
8
+
/>
9
+
</svg>
10
+
));
8
11
9
12
export default MoveUpOutlinedIcon;
+8
-5
src/components/ic-icons/outline-visibility.tsx
+8
-5
src/components/ic-icons/outline-visibility.tsx
···
1
1
import { createIcon } from './_icon';
2
2
3
-
const VisibilityOutlinedIcon = createIcon([
4
-
[
5
-
'M12 6a9.77 9.77 0 0 1 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5A9.77 9.77 0 0 1 12 6m0-2C7 4 2.73 7.11 1 11.5C2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4m0 5a2.5 2.5 0 0 1 0 5a2.5 2.5 0 0 1 0-5m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7',
6
-
],
7
-
]);
3
+
const VisibilityOutlinedIcon = createIcon(() => (
4
+
<svg width="1em" height="1em" viewBox="0 0 24 24">
5
+
<path
6
+
fill="currentColor"
7
+
d="M12 6a9.77 9.77 0 0 1 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5A9.77 9.77 0 0 1 12 6m0-2C7 4 2.73 7.11 1 11.5C2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4m0 5a2.5 2.5 0 0 1 0 5a2.5 2.5 0 0 1 0-5m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7"
8
+
/>
9
+
</svg>
10
+
));
8
11
9
12
export default VisibilityOutlinedIcon;