@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
39 lines (38 loc) • 1.44 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect } from "react";
const icons = import.meta.glob("../../assets/icons/*.svg");
export const Icon = ({ name, width, height, color, className, ...props }) => {
const [iconSrc, setIconSrc] = useState(null);
const definedWidth = width || 24;
const definedHeight = height || 24;
const filter = `filter-${color}`;
useEffect(() => {
if (!name)
return;
const loadIcon = async () => {
const urlRegex = /^https?:\/\/(?:[^/]+(?:\.[^/]+)*)?\/?[^\s]*$/;
const isRemoteIcon = urlRegex.test(name);
if (isRemoteIcon) {
setIconSrc(name);
return;
}
const iconPath = `../../assets/icons/${name}.svg`;
if (icons[iconPath]) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const module = await icons[iconPath]();
setIconSrc(module.default);
}
else {
console.warn(`Icon "${name}" not found`);
setIconSrc(null);
}
};
loadIcon();
}, [name]);
if (!iconSrc) {
// Probably loading
return null;
}
return (_jsx("img", { className: `${filter} ${className ? className : ""}`, src: iconSrc, width: definedWidth, height: definedHeight, ...props }));
};