@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
46 lines (45 loc) • 1.54 kB
JavaScript
import { defineComponent as a, useAttrs as d, computed as n } from "vue";
import { NeonIconRegistry as s } from "../../../utils/common/icons/NeonIconRegistry.es.js";
const f = a({
name: "NeonIcon",
props: {
/**
* The name of an icon registered in the icon registry.
*/
name: { type: String, required: !0 },
/**
* An id to inject into the icon. This is necessary for rendering clipPaths correctly if the same icon is used
* multiple times on a page as the ids need to be unique.
*/
id: { type: String, default: null },
/**
* The color to render the icon. By default, it will be the current text color (light text in dark mode or dark text in light mode).
*/
color: { type: String, default: null },
/**
* Set the icon color to the inverse text color
*/
inverse: { type: Boolean, default: !1 },
/**
* Apply a disabled style to the icon
*/
disabled: { type: Boolean, default: !1 }
},
setup(t) {
const i = d(), o = n(() => {
let e = s.getIcon(t.name);
return e || console.error(`icon ${t.name} doesn't exist! Register icon with NeonIconRegistry.addIcon(name, svg);`), t.id && e && (e = e.replace(/url\(#/g, `url(#${t.id}`), e = e.replace(/id="/g, `id="${t.id}`), e = e.replace("<svg ", `<svg id="${t.id}" `)), e;
});
return {
sanitizedAttributes: n(() => {
const { id: e, ...r } = i;
return r;
}),
icon: o
};
}
});
export {
f as default
};
//# sourceMappingURL=NeonIcon.es.js.map