PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.7
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.7
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / src / blocks / table-of-content / collapsibleIcons.js

collapsibleIcons.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.7, at src/blocks/table-of-content/collapsibleIcons.js

264 lines 10.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 export const Icon1 = ({ color = "black", size = 24, isTocExpanded }) => {
2 return (
3 <svg
4 xmlns="http://www.w3.org/2000/svg"
5 width={size}
6 height={size}
7 viewBox="0 0 24 24"
8 fill="none"
9 className={`sps-toc-main-toggle-icon ${isTocExpanded ? "expanded" : ""}`}
10 >
11 <path
12 d="M6 9L12 15L18 9"
13 stroke={color}
14 strokeWidth={2}
15 strokeMiterlimit={10}
16 strokeLinecap="round"
17 strokeLinejoin="round"
18 />
19 </svg>
20 );
21 };
22
23 export const Icon2 = ({ color = "black", size = 24 }) => {
24 return (
25 <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
26 <path
27 d="M18 15L12 9L6 15"
28 stroke={color}
29 strokeWidth={2}
30 strokeMiterlimit={10}
31 strokeLinecap="round"
32 strokeLinejoin="round"
33 />
34 </svg>
35 );
36 };
37
38 export const Icon3 = ({ color = "black", size = 24, isTocExpanded }) => {
39 return (
40 <svg
41 xmlns="http://www.w3.org/2000/svg"
42 width={size}
43 height={size}
44 viewBox="0 0 24 24"
45 fill="none"
46 className={`sps-toc-main-toggle-icon ${isTocExpanded ? "expanded" : ""}`}
47 >
48 <path
49 d="M6 9L12 15L18 9"
50 stroke={color}
51 strokeWidth={1.5}
52 strokeMiterlimit={10}
53 strokeLinecap="round"
54 strokeLinejoin="round"
55 />
56 </svg>
57 );
58 };
59
60 export const Icon4 = ({ color = "black", size = 24 }) => {
61 return (
62 <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
63 <path
64 d="M17.9248 14.7749L11.9248 8.7749L5.9248 14.7749"
65 stroke={color}
66 strokeWidth={1.5}
67 strokeMiterlimit={10}
68 strokeLinecap="round"
69 strokeLinejoin="round"
70 />
71 </svg>
72 );
73 };
74
75 export const Icon5 = ({ color = "black", size = 24, isTocExpanded }) => {
76 return (
77 <svg
78 xmlns="http://www.w3.org/2000/svg"
79 width={size}
80 height={size}
81 viewBox="0 0 24 24"
82 fill="none"
83 className={`sps-toc-main-toggle-icon ${isTocExpanded ? "expanded" : ""}`}
84 >
85 <path
86 d="M11.325 16.325L4.225 9.225C3.925 8.925 3.925 8.325 4.225 8.025L5.02499 7.225C5.32499 6.925 5.925 6.925 6.225 7.225L11.925 12.825L17.625 7.225C17.925 6.925 18.525 6.925 18.825 7.225L19.625 8.025C19.925 8.325 19.925 8.925 19.625 9.225L12.525 16.325C12.225 16.725 11.625 16.725 11.325 16.325Z"
87 fill={color}
88 />
89 </svg>
90 );
91 };
92
93 export const Icon6 = ({ color = "black", size = 24 }) => {
94 return (
95 <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
96 <path
97 d="M12.525 7.225L19.625 14.325C19.925 14.625 19.925 15.225 19.625 15.525L18.825 16.325C18.525 16.625 17.925 16.625 17.625 16.325L11.925 10.725L6.225 16.325C5.925 16.625 5.32499 16.625 5.02499 16.325L4.225 15.525C3.925 15.225 3.925 14.625 4.225 14.325L11.325 7.225C11.625 6.925 12.225 6.925 12.525 7.225Z"
98 fill={color}
99 />
100 </svg>
101 );
102 };
103
104 export const Icon7 = ({ color = "black", size = 24, isTocExpanded }) => {
105 return (
106 <svg
107 xmlns="http://www.w3.org/2000/svg"
108 width={size}
109 height={size}
110 viewBox="0 0 24 24"
111 fill="none"
112 className={`sps-toc-main-toggle-icon ${isTocExpanded ? "expanded" : ""}`}
113 >
114 <path
115 d="M11.75 4C12.1642 4 12.5 4.33579 12.5 4.75V11H18.75C19.1642 11 19.5 11.3358 19.5 11.75C19.5 12.1642 19.1642 12.5 18.75 12.5H12.5V18.75C12.5 19.1642 12.1642 19.5 11.75 19.5C11.3358 19.5 11 19.1642 11 18.75V12.5H4.75C4.33579 12.5 4 12.1642 4 11.75C4 11.3358 4.33579 11 4.75 11H11V4.75C11 4.33579 11.3358 4 11.75 4Z"
116 fill={color}
117 />
118 </svg>
119 );
120 };
121
122 export const Icon8 = ({ color = "black", size = 24 }) => {
123 return (
124 <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
125 <path
126 d="M18.75 11C19.1642 11 19.5 11.3358 19.5 11.75C19.5 12.1642 19.1642 12.5 18.75 12.5H4.75C4.33579 12.5 4 12.1642 4 11.75C4 11.3358 4.33579 11 4.75 11H18.75Z"
127 fill={color}
128 />
129 </svg>
130 );
131 };
132
133 export const Icon9 = ({ color = "black", size = 24, isTocExpanded }) => {
134 return (
135 <svg
136 xmlns="http://www.w3.org/2000/svg"
137 width={size}
138 height={size}
139 viewBox="0 0 24 24"
140 fill="none"
141 className={`sps-toc-main-toggle-icon ${isTocExpanded ? "expanded" : ""}`}
142 >
143 <path
144 d="M12 4C12.5523 4 13 4.44772 13 5V10.5H18.5C19.0523 10.5 19.5 10.9477 19.5 11.5V12C19.5 12.5523 19.0523 13 18.5 13H13V18.5C13 19.0523 12.5523 19.5 12 19.5H11.5C10.9477 19.5 10.5 19.0523 10.5 18.5V13H5C4.44772 13 4 12.5523 4 12V11.5C4 10.9477 4.44772 10.5 5 10.5H10.5V5C10.5 4.44772 10.9477 4 11.5 4H12Z"
145 fill={color}
146 />
147 </svg>
148 );
149 };
150
151 export const Icon10 = ({ color = "black", size = 24 }) => {
152 return (
153 <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
154 <path
155 d="M18.5625 10.675C19.1148 10.675 19.5625 11.1228 19.5625 11.675V12.175C19.5625 12.7273 19.1148 13.175 18.5625 13.175H5.0625C4.51022 13.175 4.0625 12.7273 4.0625 12.175V11.675C4.0625 11.1228 4.51022 10.675 5.0625 10.675H18.5625Z"
156 fill={color}
157 />
158 </svg>
159 );
160 };
161
162 export const Icon11 = ({ color = "black", size = 24, isTocExpanded }) => {
163 return (
164 <svg
165 xmlns="http://www.w3.org/2000/svg"
166 width={size}
167 height={size}
168 viewBox="0 0 24 24"
169 fill="none"
170 className={`sps-toc-main-toggle-icon ${isTocExpanded ? "expanded" : ""}`}
171 >
172 <path
173 d="M16.925 11.1L17.5249 11.7C17.8249 12 17.8249 12.4 17.5249 12.6L12.325 17.8C12.025 18.1 11.625 18.1 11.425 17.8L6.225 12.6C5.925 12.3 5.925 11.9 6.225 11.7L6.82498 11.1C7.12498 10.8 7.525 10.9 7.725 11.1L10.825 14.3V6.6C10.825 6.2 11.125 6 11.425 6H12.325C12.725 6 12.925 6.3 12.925 6.6V14.3L16.0249 11.1C16.2249 10.9 16.625 10.9 16.925 11.1Z"
174 fill={color}
175 />
176 </svg>
177 );
178 };
179
180 export const Icon12 = ({ color = "black", size = 24 }) => {
181 return (
182 <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
183 <path
184 d="M16.925 12.9L17.5249 12.3C17.8249 12 17.8249 11.6 17.5249 11.4L12.325 6.2C12.025 5.9 11.625 5.9 11.425 6.2L6.225 11.4C5.925 11.7 5.925 12.1 6.225 12.3L6.82498 12.9C7.12498 13.2 7.525 13.1 7.725 12.9L10.825 9.7V17.4C10.825 17.8 11.125 18 11.425 18H12.325C12.725 18 12.925 17.7 12.925 17.4V9.7L16.0249 12.9C16.2249 13.1 16.625 13.1 16.925 12.9Z"
185 fill={color}
186 />
187 </svg>
188 );
189 };
190
191 export const Icon13 = ({ color = "black", size = 20, isTocExpanded }) => {
192 return (
193 <svg
194 xmlns="http://www.w3.org/2000/svg"
195 width={size}
196 height={size}
197 viewBox="0 0 20 20"
198 fill="none"
199 className={`sps-toc-main-toggle-icon ${isTocExpanded ? "expanded" : ""}`}
200 >
201 <path
202 d="M18.2002 10C18.2002 5.47126 14.5287 1.7998 10 1.7998C5.47126 1.7998 1.7998 5.47126 1.7998 10C1.7998 14.5287 5.47126 18.2002 10 18.2002V20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20V18.2002C14.5287 18.2002 18.2002 14.5287 18.2002 10Z"
203 fill={color}
204 />
205 <path
206 d="M14.2994 8.94904H11.051V5.70064C11.051 5.31847 10.7325 5 10.3503 5H9.64968C9.26752 5 8.94904 5.31847 8.94904 5.70064V8.94904H5.70064C5.31847 8.94904 5 9.26752 5 9.64968V10.3503C5 10.7325 5.31847 11.051 5.70064 11.051H8.94904V14.2994C8.94904 14.6815 9.26752 15 9.64968 15H10.3503C10.7325 15 11.051 14.6815 11.051 14.2994V11.051H14.2994C14.6815 11.051 15 10.7325 15 10.3503V9.64968C15 9.26752 14.6815 8.94904 14.2994 8.94904Z"
207 fill={color}
208 />
209 </svg>
210 );
211 };
212
213 export const Icon14 = ({ color = "black", size = 20 }) => {
214 return (
215 <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 20 20" fill="none">
216 <path
217 d="M18.2002 10C18.2002 5.47126 14.5287 1.7998 10 1.7998C5.47126 1.7998 1.7998 5.47126 1.7998 10C1.7998 14.5287 5.47126 18.2002 10 18.2002V20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20V18.2002C14.5287 18.2002 18.2002 14.5287 18.2002 10Z"
218 fill={color}
219 />
220 <path
221 d="M14.3082 9H5.69182C5.31446 9 5 9.30303 5 9.66667V10.3333C5 10.697 5.31446 11 5.69182 11H14.3082C14.6855 11 15 10.697 15 10.3333V9.66667C15 9.30303 14.6855 9 14.3082 9Z"
222 fill={color}
223 />
224 </svg>
225 );
226 };
227
228 export const Icon15 = ({ color = "black", size = 20, isTocExpanded }) => {
229 return (
230 <svg
231 xmlns="http://www.w3.org/2000/svg"
232 width={size}
233 height={size}
234 viewBox="0 0 20 20"
235 fill="none"
236 className={`sps-toc-main-toggle-icon ${isTocExpanded ? "expanded" : ""}`}
237 >
238 <path
239 d="M10 20C7.32891 20 4.8177 18.9598 2.92891 17.0711C1.0402 15.1823 0 12.6711 0 10C0 7.32891 1.0402 4.8177 2.92891 2.92891C4.8177 1.0402 7.32891 0 10 0C12.6711 0 15.1823 1.0402 17.0711 2.92891C18.9598 4.81766 20 7.32891 20 10C20 12.6711 18.9598 15.1823 17.0711 17.0711C15.1823 18.9598 12.6711 20 10 20ZM10 1.5625C7.74625 1.5625 5.62742 2.44016 4.03379 4.03379C2.44016 5.62742 1.5625 7.74629 1.5625 10C1.5625 12.2537 2.44016 14.3726 4.03379 15.9662C5.62742 17.5598 7.74629 18.4375 10 18.4375C12.2537 18.4375 14.3726 17.5598 15.9662 15.9662C17.5598 14.3726 18.4375 12.2537 18.4375 10C18.4375 7.74629 17.5598 5.62742 15.9662 4.03379C14.3726 2.44016 12.2537 1.5625 10 1.5625Z"
240 fill={color}
241 />
242 <path
243 d="M14.9308 6.79996C14.7309 6.79996 14.5309 6.87625 14.3784 7.02879L10.001 11.4061L5.62371 7.02879C5.31859 6.72367 4.82394 6.72367 4.51886 7.02879C4.21378 7.33391 4.21375 7.82855 4.51886 8.13363L9.44863 13.0634C9.75375 13.3685 10.2484 13.3685 10.5535 13.0634L15.4832 8.13363C15.7884 7.82852 15.7884 7.33387 15.4832 7.02879C15.3307 6.87625 15.1308 6.79996 14.9308 6.79996Z"
244 fill={color}
245 />
246 </svg>
247 );
248 };
249
250 export const Icon16 = ({ color = "black", size = 20 }) => {
251 return (
252 <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 20 20" fill="none">
253 <path
254 d="M10 20C7.32891 20 4.8177 18.9598 2.92891 17.0711C1.0402 15.1823 0 12.6711 0 10C0 7.32891 1.0402 4.8177 2.92891 2.92891C4.8177 1.0402 7.32891 0 10 0C12.6711 0 15.1823 1.0402 17.0711 2.92891C18.9598 4.81766 20 7.32891 20 10C20 12.6711 18.9598 15.1823 17.0711 17.0711C15.1823 18.9598 12.6711 20 10 20ZM10 1.5625C7.74625 1.5625 5.62742 2.44016 4.03379 4.03379C2.44016 5.62742 1.5625 7.74629 1.5625 10C1.5625 12.2537 2.44016 14.3726 4.03379 15.9662C5.62742 17.5598 7.74629 18.4375 10 18.4375C12.2537 18.4375 14.3726 17.5598 15.9662 15.9662C17.5598 14.3726 18.4375 12.2537 18.4375 10C18.4375 7.74629 17.5598 5.62742 15.9662 4.03379C14.3726 2.44016 12.2537 1.5625 10 1.5625Z"
255 fill={color}
256 />
257 <path
258 d="M14.9308 13.2923C14.7309 13.2923 14.5309 13.216 14.3784 13.0635L10.001 8.68615L5.62371 13.0635C5.31859 13.3686 4.82394 13.3686 4.51886 13.0635C4.21378 12.7584 4.21375 12.2637 4.51886 11.9587L9.44863 7.02889C9.75375 6.72377 10.2484 6.72377 10.5535 7.02889L15.4832 11.9587C15.7884 12.2638 15.7884 12.7584 15.4832 13.0635C15.3307 13.216 15.1308 13.2923 14.9308 13.2923Z"
259 fill={color}
260 />
261 </svg>
262 );
263 };
264