refactor: [account-transactions] createIcon React.createElement 방식으로 교체

- useRef/useEffect DOM 조작 → React 네이티브 SVG 렌더링
- arrow-up-circle/arrow-down-circle 아이콘 별칭 추가
This commit is contained in:
김보곤
2026-02-23 17:54:52 +09:00
parent 303b3f5861
commit 6ba4f4efdf

View File

@@ -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');