@poupe/vue
Version:
Vue component library for Poupe UI framework with theme customization and accessibility support
45 lines (43 loc) • 1.2 kB
JavaScript
import { reactive, readonly, toValue } from "vue";
import "@iconify/vue";
const blankIcon = {
body: "",
width: 24,
height: 24
}, unknownIcon = {
body: "<text y=\".9em\" font-size=\"90\" fill=\"currentColor\">�</text>",
width: 100,
height: 100
};
const defaultIcons = {
blankIcon,
unknownIcon,
spinner: "svg-spinners:6-dots-scale",
showPassword: "heroicons:eye",
hidePassword: "heroicons:eye-slash"
};
const globalIcons = reactive({ poupe: defaultIcons });
const registerIcons = (namespace, icons) => {
globalIcons[namespace] = {
...globalIcons[namespace],
...icons
};
};
const toIcon = (icon) => {
const v = toValue(icon);
if (!v) return globalIcons.poupe.blankIcon;
if (typeof v !== "string") return v;
const i = v.indexOf(":");
const icons = globalIcons[i > 0 ? v.slice(0, i) : "poupe"];
if (!icons) return v;
const name = i === -1 ? v : v.slice(i + 1);
if (icons[name]) return toIcon(icons[name]);
const camelCase = name.replaceAll(/[-_]([a-z])/g, (_, c) => c.toUpperCase());
if (icons[camelCase]) return toIcon(icons[camelCase]);
return globalIcons.poupe.unknownIcon;
};
export const usePoupeIcons = () => ({
icons: readonly(globalIcons),
toIcon,
registerIcons
});