Skip to content

Commit 177b2c4

Browse files
committed
feat: add CIcon component without styles
1 parent b282ed3 commit 177b2c4

File tree

2 files changed

+73
-0
lines changed

2 files changed

+73
-0
lines changed

CIconRaw.vue

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<svg
3+
v-if="!src"
4+
xmlns="http://www.w3.org/2000/svg"
5+
:viewBox="viewBox"
6+
:class="computedClasses"
7+
v-html="titleCode + iconCode"
8+
></svg>
9+
<img
10+
v-else
11+
:src="src"
12+
/>
13+
</template>
14+
15+
<script>
16+
export default {
17+
name: 'CIcon',
18+
props: {
19+
name: String,
20+
content: [String, Array],
21+
size: {
22+
type: String,
23+
validator: size => [
24+
'custom-size', 'sm', 'lg', 'xl',
25+
'2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl'
26+
].includes(size)
27+
},
28+
customClasses: [String, Array, Object],
29+
src: String
30+
},
31+
computed: {
32+
iconName () {
33+
const iconNameIsKebabCase = this.name && this.name.includes('-')
34+
return iconNameIsKebabCase ? this.toCamelCase(this.name) : this.name
35+
},
36+
titleCode () {
37+
return this.iconName ? `<title>${this.iconName}</title>` : ''
38+
},
39+
code () {
40+
if (this.content) {
41+
return this.content
42+
} else if (this.$root.$options.icons) {
43+
return this.$root.$options.icons[this.iconName]
44+
}
45+
},
46+
iconCode () {
47+
return Array.isArray(this.code) ? this.code[1] || this.code[0] : this.code
48+
},
49+
scale () {
50+
return Array.isArray(this.code) && this.code.length > 1 ? this.code[0] : '64 64'
51+
},
52+
viewBox () {
53+
return this.$attrs.viewBox || `0 0 ${this.scale}`
54+
},
55+
computedSize () {
56+
return this.$attrs.width || this.$attrs.height ? 'custom-size' : this.size
57+
},
58+
computedClasses () {
59+
return this.customClasses ||
60+
['c-icon', { [`c-icon-${this.computedSize}`]: this.computedSize }]
61+
}
62+
},
63+
methods: {
64+
toCamelCase (str) {
65+
return str.replace(/([-_][a-z0-9])/ig, ($1) => {
66+
return $1.toUpperCase().replace('-', '')
67+
})
68+
}
69+
}
70+
}
71+
</script>

index.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,5 @@ export declare class CIcon extends Vue {
77
customClasses: [string, Array<any>, object]
88
src: string
99
}
10+
11+
export declare class CIconRaw extends CIcon {}

0 commit comments

Comments
 (0)