Skip to content

Commit a0b0770

Browse files
BlankeosBlankeos
committed
feat: Improved use favicon hook visuals.
1 parent 4b095ac commit a0b0770

File tree

4 files changed

+149
-8
lines changed

4 files changed

+149
-8
lines changed

‎dev/components/examples/use-favicon/use-favicon.example.tsx‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,27 @@ import { useFavicon } from 'src';
22
import { ExampleBase } from '../example-base';
33
import Code from './use-favicon.code.mdx';
44

5+
import { IconSolidJS, IconX } from 'dev/icons';
56
import { createSignal } from 'solid-js';
67
import { useMDXComponents } from 'solid-jsx';
78

89
export function UseFaviconExample() {
9-
const [touched, setTouched] = createSignal(false);
10+
const [currentIcon, setCurrentIcon] = createSignal<'solid' | 'x' | undefined>(); // Not relevant, just for visuals
1011

1112
// OLD Implementation:
1213
// const [favicon, setFavicon] = createSignal('https://docs.solidjs.com/favicon.svg');
1314

1415
// IMPROVED Implementation:
1516
const [_favicon, setFavicon] = useFavicon();
1617

17-
const setXFavicon = () => setFavicon('https://x.com/favicon.ico');
18-
const setSolidFavicon = () => setFavicon('https://docs.solidjs.com/favicon.svg');
18+
const setXFavicon = () => {
19+
setCurrentIcon('x');
20+
setFavicon('https://x.com/favicon.ico');
21+
};
22+
const setSolidFavicon = () => {
23+
setCurrentIcon('solid');
24+
setFavicon('https://docs.solidjs.com/favicon.svg');
25+
};
1926

2027
// @ts-ignore
2128
const components: any = useMDXComponents();
@@ -26,23 +33,30 @@ export function UseFaviconExample() {
2633
description="Appends <link /> element to head component with given favicon url. The hook is not called during server side rendering."
2734
code={<Code components={components} />}
2835
>
29-
<div class="flex h-full w-full flex-col items-center justify-center gap-3 rounded-md border p-3 py-10 text-center text-sm">
36+
<div class="relative flex h-full w-full flex-col items-center justify-center gap-3 overflow-hidden rounded-md border p-3 py-10 text-center text-sm">
37+
<IconSolidJS
38+
class="absolute -bottom-10 -right-10 h-48 w-48 rotate-45 transition"
39+
style={{ opacity: currentIcon() === 'solid' ? 1 : 0 }}
40+
/>
41+
<IconX
42+
class="absolute -bottom-10 -right-10 h-48 w-48 rotate-45 transition"
43+
style={{ opacity: currentIcon() === 'x' ? 1 : 0 }}
44+
/>
45+
3046
<button
3147
onClick={() => {
32-
setTouched(true);
3348
setXFavicon();
3449
}}
35-
class="rounded-md border px-2 py-1.5 transition active:scale-95"
50+
class="relative rounded-md border bg-white px-2 py-1.5 transition active:scale-95"
3651
>
3752
X favicon
3853
</button>
3954

4055
<button
4156
onClick={() => {
42-
setTouched(true);
4357
setSolidFavicon();
4458
}}
45-
class="rounded-md border px-2 py-1.5 transition active:scale-95"
59+
class="relative rounded-md border bg-white px-2 py-1.5 transition active:scale-95"
4660
>
4761
Solid favicon
4862
</button>

‎dev/icons/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
export { default as IconCheck } from './check';
22
export { default as IconCode } from './code';
33
export { default as IconCopy } from './copy';
4+
export { default as IconEyeDropper } from './eye-dropper';
45
export { default as IconGithub } from './github';
56
export { default as IconLogo } from './logo';
7+
export { default as IconSolidJS } from './solidjs';
8+
export { default as IconX } from './x';

‎dev/icons/solidjs.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { JSX, VoidProps } from 'solid-js';
2+
3+
export default function SolidJS(props: VoidProps<JSX.SvgSVGAttributes<SVGSVGElement>>) {
4+
return (
5+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 128 128" {...props}>
6+
<defs>
7+
<linearGradient
8+
id="deviconSolidjs0"
9+
x1="27.5"
10+
x2="152"
11+
y1="3"
12+
y2="63.5"
13+
gradientTransform="translate(-3.22 1.507)scale(.80503)"
14+
gradientUnits="userSpaceOnUse"
15+
>
16+
<stop offset=".1" stop-color="#76b3e1" />
17+
<stop offset=".3" stop-color="#dcf2fd" />
18+
<stop offset="1" stop-color="#76b3e1" />
19+
</linearGradient>
20+
<linearGradient
21+
id="deviconSolidjs1"
22+
x1="95.8"
23+
x2="74"
24+
y1="32.6"
25+
y2="105.2"
26+
gradientTransform="translate(-3.22 1.507)scale(.80503)"
27+
gradientUnits="userSpaceOnUse"
28+
>
29+
<stop offset="0" stop-color="#76b3e1" />
30+
<stop offset=".5" stop-color="#4377bb" />
31+
<stop offset="1" stop-color="#1f3b77" />
32+
</linearGradient>
33+
<linearGradient
34+
id="deviconSolidjs2"
35+
x1="18.4"
36+
x2="144.3"
37+
y1="64.2"
38+
y2="149.8"
39+
gradientTransform="translate(-3.22 1.507)scale(.80503)"
40+
gradientUnits="userSpaceOnUse"
41+
>
42+
<stop offset="0" stop-color="#315aa9" />
43+
<stop offset=".5" stop-color="#518ac8" />
44+
<stop offset="1" stop-color="#315aa9" />
45+
</linearGradient>
46+
<linearGradient
47+
id="deviconSolidjs3"
48+
x1="75.2"
49+
x2="24.4"
50+
y1="74.5"
51+
y2="260.8"
52+
gradientTransform="translate(-3.22 1.507)scale(.80503)"
53+
gradientUnits="userSpaceOnUse"
54+
>
55+
<stop offset="0" stop-color="#4377bb" />
56+
<stop offset=".5" stop-color="#1a336b" />
57+
<stop offset="1" stop-color="#1a336b" />
58+
</linearGradient>
59+
</defs>
60+
<path
61+
fill="#76b3e1"
62+
d="M128 29.683S85.333-1.713 52.327 5.532l-2.415.805c-4.83 1.61-8.855 4.025-11.27 7.245l-1.61 2.415l-12.076 20.931l20.93 4.025c8.856 5.636 20.127 8.05 30.592 5.636l37.031 7.245z"
63+
/>
64+
<path
65+
fill="url(#deviconSolidjs0)"
66+
d="M128 29.683S85.333-1.713 52.327 5.532l-2.415.805c-4.83 1.61-8.855 4.025-11.27 7.245l-1.61 2.415l-12.076 20.931l20.93 4.025c8.856 5.636 20.127 8.05 30.592 5.636l37.031 7.245z"
67+
opacity=".3"
68+
/>
69+
<path
70+
fill="#518ac8"
71+
d="m38.642 29.683l-3.22.805C21.735 34.513 17.71 47.394 24.955 58.664c8.05 10.465 24.956 16.1 38.641 12.076l49.912-16.906S70.843 22.438 38.642 29.683"
72+
/>
73+
<path
74+
fill="url(#deviconSolidjs1)"
75+
d="m38.642 29.683l-3.22.805C21.735 34.513 17.71 47.394 24.955 58.664c8.05 10.465 24.956 16.1 38.641 12.076l49.912-16.906S70.843 22.438 38.642 29.683"
76+
opacity=".3"
77+
/>
78+
<path
79+
fill="url(#deviconSolidjs2)"
80+
d="M104.654 65.91a36.23 36.23 0 0 0-38.641-12.076L16.1 69.934L0 98.111l90.164 15.295l16.1-28.981c3.22-5.635 2.415-12.075-1.61-18.516z"
81+
/>
82+
<path
83+
fill="url(#deviconSolidjs3)"
84+
d="M88.553 94.085A36.23 36.23 0 0 0 49.912 82.01L0 98.11s42.667 32.202 75.673 24.152l2.415-.806c13.686-4.025 18.516-16.905 10.465-27.37z"
85+
/>
86+
</svg>
87+
);
88+
}

‎dev/icons/x.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { JSX, VoidProps } from 'solid-js';
2+
3+
export default function IconX(props: VoidProps<JSX.SvgSVGAttributes<SVGSVGElement>>) {
4+
return (
5+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" {...props}>
6+
<g fill="currentColor">
7+
<path d="M1 2h2.5L3.5 2h-2.5zM5.5 2h2.5L7.2 2h-2.5z">
8+
<animate
9+
fill="freeze"
10+
attributeName="d"
11+
dur="0.4s"
12+
values="M1 2h2.5L3.5 2h-2.5zM5.5 2h2.5L7.2 2h-2.5z;M1 2h2.5L18.5 22h-2.5zM5.5 2h2.5L23 22h-2.5z"
13+
/>
14+
</path>
15+
<path d="M3 2h5v0h-5zM16 22h5v0h-5z">
16+
<animate
17+
fill="freeze"
18+
attributeName="d"
19+
begin="0.4s"
20+
dur="0.4s"
21+
values="M3 2h5v0h-5zM16 22h5v0h-5z;M3 2h5v2h-5zM16 22h5v-2h-5z"
22+
/>
23+
</path>
24+
<path d="M18.5 2h3.5L22 2h-3.5z">
25+
<animate
26+
fill="freeze"
27+
attributeName="d"
28+
begin="0.5s"
29+
dur="0.4s"
30+
values="M18.5 2h3.5L22 2h-3.5z;M18.5 2h3.5L5 22h-3.5z"
31+
/>
32+
</path>
33+
</g>
34+
</svg>
35+
);
36+
}

0 commit comments

Comments
 (0)