refactor: [account-transactions] createIcon React.createElement 방식으로 교체
- useRef/useEffect DOM 조작 → React 네이티브 SVG 렌더링 - arrow-up-circle/arrow-down-circle 아이콘 별칭 추가
This commit is contained in:
@@ -20,18 +20,21 @@
|
||||
<script type="text/babel">
|
||||
const { useState, useRef, useEffect } = React;
|
||||
|
||||
const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
|
||||
const ref = useRef(null);
|
||||
useEffect(() => {
|
||||
const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
|
||||
if (ref.current && _def) {
|
||||
ref.current.innerHTML = '';
|
||||
const svg = lucide.createElement(_def);
|
||||
svg.setAttribute('class', className);
|
||||
ref.current.appendChild(svg);
|
||||
}
|
||||
}, [className]);
|
||||
return <span ref={ref} className="inline-flex items-center" {...props} />;
|
||||
const createIcon = (name) => {
|
||||
const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck','arrow-up-circle':'CircleArrowUp','arrow-down-circle':'CircleArrowDown'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
|
||||
const _c = s => s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
|
||||
return ({ className = "w-5 h-5", ...props }) => {
|
||||
if (!_def) return null;
|
||||
const [, attrs, children = []] = _def;
|
||||
const sp = { className };
|
||||
Object.entries(attrs).forEach(([k, v]) => { sp[_c(k)] = v; });
|
||||
Object.assign(sp, props);
|
||||
return React.createElement("svg", sp, ...children.map(([tag, ca], i) => {
|
||||
const cp = { key: i };
|
||||
if (ca) Object.entries(ca).forEach(([k, v]) => { cp[_c(k)] = v; });
|
||||
return React.createElement(tag, cp);
|
||||
}));
|
||||
};
|
||||
};
|
||||
|
||||
const ArrowUpDown = createIcon('arrow-up-down');
|
||||
|
||||
Reference in New Issue
Block a user