this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Test memoize svg icon

+42 -10
+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>