1
0
mirror of https://github.com/coreui/coreui-icons.git synced 2025-08-20 23:41:21 +02:00
Files
coreui-icons/vue/CIcon.vue
2019-10-22 12:26:06 +02:00

78 lines
2.0 KiB
Vue

<template>
<svg
v-if="name || content"
xmlns="http://www.w3.org/2000/svg"
:viewBox="viewBox"
:class="computedClasses"
v-html="icon.svgContent"
></svg>
<component
v-else
:is="fontIconTag"
:class="computedClasses"
></component>
</template>
<script>
export default {
name: 'CIcon',
//This object contains icons added before component registration
icons: {},
props: {
name: String,
content: [String, Array],
// fill: String,
// background: String,
size: {
type: String,
validator: size => ['sm', 'lg', 'xl', 'custom-size'].includes(size)
},
customClasses: [String, Array, Object],
fontIconTag: {
type: String,
default: 'i'
}
},
computed: {
iconName () {
const iconNameIsKebabCase = this.name && this.name.includes('-')
return iconNameIsKebabCase ? this.toCamelCase(this.name) : this.name
},
code () {
return this.content || this.$options.icons[this.iconName]
},
icon () {
if (Array.isArray(this.code)) {
const coordinates = this.code.length > 1 ? this.code[0] : '64 64'
const svgContent = this.code.length > 1 ? this.code[1] : this.code[0]
return { coordinates, svgContent }
}
return { coordinates: '64 64', svgContent: this.code }
},
viewBox () {
return this.$attrs.viewBox || `0 0 ${ this.icon.coordinates }`
},
// style () {
// return {
// fill: this.fill || 'currentColor',
// background: this.background
// }
// },
computedSize () {
return this.$attrs.width || this.$attrs.height ? 'custom-size' : this.size
},
computedClasses () {
return this.customClasses ||
['c-icon', { [`c-icon-${this.computedSize}`]: this.computedSize }]
}
},
methods: {
toCamelCase (str) {
return str.replace(/([-_][a-z0-9])/ig, ($1) => {
return $1.toUpperCase().replace('-', '')
})
}
}
}
</script>