Skip to content

Commit 589f469

Browse files
dvcoldvcol
committed
feat(list): adds support for favorites & fancy icons
1 parent 55fb60b commit 589f469

File tree

11 files changed

+339
-21
lines changed

11 files changed

+339
-21
lines changed

‎src/components/icons/IconCheckedList.vue

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
4+
<g fill="none" stroke-dasharray="10" stroke-dashoffset="10" stroke-width="2">
5+
<path d="M3 5L5 7L9 3">
6+
<animate
7+
fill="freeze"
8+
attributeName="stroke-dashoffset"
9+
dur="0.15s"
10+
values="10;0"
11+
/>
12+
</path>
13+
<path d="M3 12L5 14L9 10">
14+
<animate
15+
fill="freeze"
16+
attributeName="stroke-dashoffset"
17+
begin="0.375s"
18+
dur="0.15s"
19+
values="10;0"
20+
/>
21+
</path>
22+
<path d="M3 19L5 21L9 17">
23+
<animate
24+
fill="freeze"
25+
attributeName="stroke-dashoffset"
26+
begin="0.75s"
27+
dur="0.15s"
28+
values="10;0"
29+
/>
30+
</path>
31+
</g>
32+
<g
33+
fill="currentColor"
34+
fill-opacity="0"
35+
stroke-dasharray="22"
36+
stroke-dashoffset="22"
37+
>
38+
<rect width="9" height="3" x="11.5" y="3.5" rx="1.5">
39+
<animate
40+
fill="freeze"
41+
attributeName="stroke-dashoffset"
42+
begin="0.15s"
43+
dur="0.375s"
44+
values="22;0"
45+
/>
46+
<animate
47+
fill="freeze"
48+
attributeName="fill-opacity"
49+
begin="1.275s"
50+
dur="0.375s"
51+
values="0;1"
52+
/>
53+
</rect>
54+
<rect width="9" height="3" x="11.5" y="10.5" rx="1.5">
55+
<animate
56+
fill="freeze"
57+
attributeName="stroke-dashoffset"
58+
begin="0.525s"
59+
dur="0.375s"
60+
values="22;0"
61+
/>
62+
<animate
63+
fill="freeze"
64+
attributeName="fill-opacity"
65+
begin="1.425s"
66+
dur="0.375s"
67+
values="0;1"
68+
/>
69+
</rect>
70+
<rect width="9" height="3" x="11.5" y="17.5" rx="1.5">
71+
<animate
72+
fill="freeze"
73+
attributeName="stroke-dashoffset"
74+
begin="0.9s"
75+
dur="0.375s"
76+
values="22;0"
77+
/>
78+
<animate
79+
fill="freeze"
80+
attributeName="fill-opacity"
81+
begin="1.575s"
82+
dur="0.375s"
83+
values="0;1"
84+
/>
85+
</rect>
86+
</g>
87+
</g>
88+
</svg>
89+
</template>

‎src/components/icons/IconGrid.vue

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<g
4+
fill="currentColor"
5+
fill-opacity="0"
6+
stroke="currentColor"
7+
stroke-dasharray="10"
8+
stroke-dashoffset="10"
9+
stroke-linecap="round"
10+
>
11+
<g>
12+
<circle cx="5" cy="5" r="1.5" />
13+
<circle cx="12" cy="5" r="1.5" />
14+
<circle cx="19" cy="5" r="1.5" />
15+
<animate
16+
fill="freeze"
17+
attributeName="stroke-dashoffset"
18+
dur="0.15s"
19+
values="10;0"
20+
/>
21+
<animate
22+
fill="freeze"
23+
attributeName="fill-opacity"
24+
begin="0.6s"
25+
dur="0.375s"
26+
values="0;1"
27+
/>
28+
</g>
29+
<g>
30+
<circle cx="5" cy="12" r="1.5" />
31+
<circle cx="12" cy="12" r="1.5" />
32+
<circle cx="19" cy="12" r="1.5" />
33+
<animate
34+
fill="freeze"
35+
attributeName="stroke-dashoffset"
36+
begin="0.3s"
37+
dur="0.15s"
38+
values="10;0"
39+
/>
40+
<animate
41+
fill="freeze"
42+
attributeName="fill-opacity"
43+
begin="0.75s"
44+
dur="0.375s"
45+
values="0;1"
46+
/>
47+
</g>
48+
<g>
49+
<circle cx="5" cy="19" r="1.5" />
50+
<circle cx="12" cy="19" r="1.5" />
51+
<circle cx="19" cy="19" r="1.5" />
52+
<animate
53+
fill="freeze"
54+
attributeName="stroke-dashoffset"
55+
begin="0.45s"
56+
dur="0.15s"
57+
values="10;0"
58+
/>
59+
<animate
60+
fill="freeze"
61+
attributeName="fill-opacity"
62+
begin="0.9s"
63+
dur="0.375s"
64+
values="0;1"
65+
/>
66+
</g>
67+
</g>
68+
</svg>
69+
</template>

‎src/components/icons/IconHeart.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<path
4+
fill="currentColor"
5+
fill-opacity="0"
6+
d="M12 20L20.5 11V7L17 5.5L12 7L7 5.5L3.5 7V11L12 20Z"
7+
>
8+
<animate
9+
fill="freeze"
10+
attributeName="fill-opacity"
11+
begin="0.5s"
12+
dur="0.5s"
13+
values="0;1"
14+
/>
15+
</path>
16+
<path
17+
fill="none"
18+
stroke="currentColor"
19+
stroke-dasharray="30"
20+
stroke-dashoffset="30"
21+
stroke-linecap="round"
22+
stroke-width="2"
23+
d="M12 8C12 8 12 8 12.7578 7C13.6343 5.84335 14.9398 5 16.5 5C18.9853 5 21 7.01472 21 9.5C21 10.4251 20.7209 11.285 20.2422 12C19.435 13.206 12 21 12 21M12 8C12 8 12 8 11.2422 7C10.3657 5.84335 9.06021 5 7.5 5C5.01472 5 3 7.01472 3 9.5C3 10.4251 3.27914 11.285 3.75777 12C4.56504 13.206 12 21 12 21"
24+
>
25+
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="30;0" />
26+
</path>
27+
</svg>
28+
</template>

‎src/components/icons/IconList.vue

+54-12
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,103 @@
11
<template>
22
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3-
<g fill="none" stroke="currentColor" stroke-linecap="round">
3+
<g fill="currentColor" fill-opacity="0" stroke="currentColor" stroke-linecap="round">
44
<g stroke-dasharray="10" stroke-dashoffset="10">
55
<circle cx="5" cy="5" r="1.5">
66
<animate
77
fill="freeze"
88
attributeName="stroke-dashoffset"
9-
dur="0.1s"
9+
dur="0.15s"
1010
values="10;0"
1111
/>
12+
<animate
13+
fill="freeze"
14+
attributeName="fill-opacity"
15+
begin="1.5s"
16+
dur="0.375s"
17+
values="0;1"
18+
/>
1219
</circle>
1320
<circle cx="5" cy="12" r="1.5">
1421
<animate
1522
fill="freeze"
1623
attributeName="stroke-dashoffset"
17-
begin="0.35s"
18-
dur="0.1s"
24+
begin="0.525s"
25+
dur="0.15s"
1926
values="10;0"
2027
/>
28+
<animate
29+
fill="freeze"
30+
attributeName="fill-opacity"
31+
begin="1.65s"
32+
dur="0.375s"
33+
values="0;1"
34+
/>
2135
</circle>
2236
<circle cx="5" cy="19" r="1.5">
2337
<animate
2438
fill="freeze"
2539
attributeName="stroke-dashoffset"
26-
begin="0.7s"
27-
dur="0.1s"
40+
begin="1.05s"
41+
dur="0.15s"
2842
values="10;0"
2943
/>
44+
<animate
45+
fill="freeze"
46+
attributeName="fill-opacity"
47+
begin="1.8s"
48+
dur="0.375s"
49+
values="0;1"
50+
/>
3051
</circle>
3152
</g>
3253
<g stroke-dasharray="28" stroke-dashoffset="28">
3354
<rect width="11" height="3" x="9.5" y="3.5" rx="1.5">
3455
<animate
3556
fill="freeze"
3657
attributeName="stroke-dashoffset"
37-
begin="0.05s"
38-
dur="0.25s"
58+
begin="0.075s"
59+
dur="0.375s"
3960
values="28;0"
4061
/>
62+
<animate
63+
fill="freeze"
64+
attributeName="fill-opacity"
65+
begin="1.5s"
66+
dur="0.375s"
67+
values="0;1"
68+
/>
4169
</rect>
4270
<rect width="11" height="3" x="9.5" y="10.5" rx="1.5">
4371
<animate
4472
fill="freeze"
4573
attributeName="stroke-dashoffset"
46-
begin="0.4s"
47-
dur="0.25s"
74+
begin="0.6s"
75+
dur="0.375s"
4876
values="28;0"
4977
/>
78+
<animate
79+
fill="freeze"
80+
attributeName="fill-opacity"
81+
begin="1.65s"
82+
dur="0.375s"
83+
values="0;1"
84+
/>
5085
</rect>
5186
<rect width="11" height="3" x="9.5" y="17.5" rx="1.5">
5287
<animate
5388
fill="freeze"
5489
attributeName="stroke-dashoffset"
55-
begin="0.75s"
56-
dur="0.25s"
90+
begin="1.125s"
91+
dur="0.375s"
5792
values="28;0"
5893
/>
94+
<animate
95+
fill="freeze"
96+
attributeName="fill-opacity"
97+
begin="1.8s"
98+
dur="0.375s"
99+
values="0;1"
100+
/>
59101
</rect>
60102
</g>
61103
</g>

‎src/components/icons/IconStar.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<path
4+
fill="currentColor"
5+
fill-opacity="0"
6+
stroke="currentColor"
7+
stroke-dasharray="32"
8+
stroke-dashoffset="32"
9+
stroke-linecap="round"
10+
stroke-linejoin="round"
11+
stroke-width="2"
12+
d="M12 3L9.65 8.76L3.44 9.22L8.2 13.24L6.71 19.28L12 16M12 3L14.35 8.76L20.56 9.22L15.8 13.24L17.29 19.28L12 16"
13+
>
14+
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="32;0" />
15+
<animate
16+
fill="freeze"
17+
attributeName="fill-opacity"
18+
begin="0.5s"
19+
dur="0.5s"
20+
values="0;1"
21+
/>
22+
</path>
23+
</svg>
24+
</template>

0 commit comments

Comments
 (0)