@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
55 lines • 1.64 kB
JavaScript
import { h, computed, defineComponent, onMounted, inject } from 'vue';
import { defaultPropValue, sizePropValidator } from '../../mixins/index.mjs';
import { renderSvg, toCamelCase } from '../../helpers/index.mjs';
/**
* The icon to be displayed
* @type String
* @default
* @name name
*/
const componentName = 'IIcon';
export default defineComponent({
name: componentName,
props: {
/**
* @description The icon to be displayed
* @type String
* @default
* @name name
*/
name: {
type: String,
default: ''
},
/**
* The size variant of the icon
* @type sm | md | lg
* @default md
* @name size
*/
size: {
type: String,
default: defaultPropValue(componentName, 'size'),
validator: sizePropValidator
}
},
setup(props) {
const icons = inject('inklineIcons');
const iconName = computed(() => toCamelCase(props.name));
const icon = computed(() => icons[iconName.value]);
const classes = computed(() => ({
'inkline-icon': true,
[`-${props.size}`]: Boolean(props.size)
}));
onMounted(() => {
if (iconName.value && !icons[iconName.value]) {
console.error(`The icon ${iconName.value} is not registered.`);
}
});
return () => h('svg', {
class: classes.value,
...icon.value?.attributes
}, renderSvg(icon.value?.children || []));
}
});
//# sourceMappingURL=script.mjs.map