nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Test memoize svg icon

Browse source
This commit is contained in:
Lim Chee Aun 2024-01-03 09:49:48 +08:00
parent 1adcca5666
commit 92c0a8b4f0
1 changed files with 42 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/icon.jsx
View file

@ -1,3 +1,4 @@
import moize from 'moize';
import { useEffect, useRef, useState } from 'preact/hooks';
const SIZES = {
@ -110,6 +111,29 @@ export const ICONS = {
const ICONDATA = {};
// Memoize the dangerouslySetInnerHTML of the SVGs
const SVGICon = moize(
function ({ size, width, height, body, rotate, flip }) {
return (
<svg
width={size}
height={size}
viewBox={`0 0 ${width} ${height}`}
dangerouslySetInnerHTML={{ __html: body }}
style={{
transform: `${rotate ? `rotate(${rotate})` : ''} ${
flip ? `scaleX(-1)` : ''
}`,
}}
/>
);
},
{
isShallowEqual: true,
maxSize: Object.keys(ICONS).length,
},
);
function Icon({
icon,
size = 'm',
@ -150,16 +174,24 @@ function Icon({
}}
>
{iconData && (
<svg
width={iconSize}
height={iconSize}
viewBox={`0 0 ${iconData.width} ${iconData.height}`}
dangerouslySetInnerHTML={{ __html: iconData.body }}
style={{
transform: `${rotate ? `rotate(${rotate})` : ''} ${
flip ? `scaleX(-1)` : ''
}`,
}}
// <svg
// width={iconSize}
// height={iconSize}
// viewBox={`0 0 ${iconData.width} ${iconData.height}`}
// dangerouslySetInnerHTML={{ __html: iconData.body }}
// style={{
// transform: `${rotate ? `rotate(${rotate})` : ''} ${
// flip ? `scaleX(-1)` : ''
// }`,
// }}
// />
<SVGICon
size={iconSize}
width={iconData.width}
height={iconData.height}
body={iconData.body}
rotate={rotate}
flip={flip}
/>
)}
</span>