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 >
0 commit comments