this repo has no description
Test memoize svg icon
+42
-10
+42
-10
src/components/icon.jsx
+42
-10
src/components/icon.jsx
···
1
+
import moize from 'moize';
1
2
import { useEffect, useRef, useState } from 'preact/hooks';
2
3
3
4
const SIZES = {
···
110
111
111
112
const ICONDATA = {};
112
113
114
+
// Memoize the dangerouslySetInnerHTML of the SVGs
115
+
const SVGICon = moize(
116
+
function ({ size, width, height, body, rotate, flip }) {
117
+
return (
118
+
<svg
119
+
width={size}
120
+
height={size}
121
+
viewBox={`0 0 ${width} ${height}`}
122
+
dangerouslySetInnerHTML={{ __html: body }}
123
+
style={{
124
+
transform: `${rotate ? `rotate(${rotate})` : ''} ${
125
+
flip ? `scaleX(-1)` : ''
126
+
}`,
127
+
}}
128
+
/>
129
+
);
130
+
},
131
+
{
132
+
isShallowEqual: true,
133
+
maxSize: Object.keys(ICONS).length,
134
+
},
135
+
);
136
+
113
137
function Icon({
114
138
icon,
115
139
size = 'm',
···
150
174
}}
151
175
>
152
176
{iconData && (
153
-
<svg
154
-
width={iconSize}
155
-
height={iconSize}
156
-
viewBox={`0 0 ${iconData.width} ${iconData.height}`}
157
-
dangerouslySetInnerHTML={{ __html: iconData.body }}
158
-
style={{
159
-
transform: `${rotate ? `rotate(${rotate})` : ''} ${
160
-
flip ? `scaleX(-1)` : ''
161
-
}`,
162
-
}}
177
+
// <svg
178
+
// width={iconSize}
179
+
// height={iconSize}
180
+
// viewBox={`0 0 ${iconData.width} ${iconData.height}`}
181
+
// dangerouslySetInnerHTML={{ __html: iconData.body }}
182
+
// style={{
183
+
// transform: `${rotate ? `rotate(${rotate})` : ''} ${
184
+
// flip ? `scaleX(-1)` : ''
185
+
// }`,
186
+
// }}
187
+
// />
188
+
<SVGICon
189
+
size={iconSize}
190
+
width={iconData.width}
191
+
height={iconData.height}
192
+
body={iconData.body}
193
+
rotate={rotate}
194
+
flip={flip}
163
195
/>
164
196
)}
165
197
</span>