Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit b282ed3

Browse filesBrowse files
woothuwoothu
committed
refactor: CIcon: add title generating, styles, refactor functions
1 parent 01dd086 commit b282ed3
Copy full SHA for b282ed3

File tree

4 files changed

+114
-12
lines changed
Filter options

4 files changed

+114
-12
lines changed

‎.eslintrc.js

Copy file name to clipboard
+10Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
'extends': [
3+
'plugin:vue/essential',
4+
'eslint:recommended'
5+
],
6+
rules: {
7+
'vue/return-in-computed-property': 'off',
8+
'no-undef': 'off'
9+
}
10+
}

‎CIcon.vue

Copy file name to clipboardExpand all lines: CIcon.vue
+98-11Lines changed: 98 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
xmlns="http://www.w3.org/2000/svg"
55
:viewBox="viewBox"
66
:class="computedClasses"
7-
v-html="icon.svgContent"
7+
v-html="titleCode + iconCode"
88
></svg>
99
<img
1010
v-else
@@ -20,7 +20,10 @@ export default {
2020
content: [String, Array],
2121
size: {
2222
type: String,
23-
validator: size => ['sm', 'lg', 'xl', 'custom-size'].includes(size)
23+
validator: size => [
24+
'custom-size', 'sm', 'lg', 'xl',
25+
'2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl'
26+
].includes(size)
2427
},
2528
customClasses: [String, Array, Object],
2629
src: String
@@ -30,24 +33,24 @@ export default {
3033
const iconNameIsKebabCase = this.name && this.name.includes('-')
3134
return iconNameIsKebabCase ? this.toCamelCase(this.name) : this.name
3235
},
36+
titleCode () {
37+
return this.iconName ? `<title>${this.iconName}</title>` : ''
38+
},
3339
code () {
3440
if (this.content) {
3541
return this.content
3642
} else if (this.$root.$options.icons) {
3743
return this.$root.$options.icons[this.iconName]
3844
}
39-
return undefined
4045
},
41-
icon () {
42-
if (Array.isArray(this.code)) {
43-
const coordinates = this.code.length > 1 ? this.code[0] : '64 64'
44-
const svgContent = this.code.length > 1 ? this.code[1] : this.code[0]
45-
return { coordinates, svgContent }
46-
}
47-
return { coordinates: '64 64', svgContent: this.code }
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'
4851
},
4952
viewBox () {
50-
return this.$attrs.viewBox || `0 0 ${ this.icon.coordinates }`
53+
return this.$attrs.viewBox || `0 0 ${this.scale}`
5154
},
5255
computedSize () {
5356
return this.$attrs.width || this.$attrs.height ? 'custom-size' : this.size
@@ -66,3 +69,87 @@ export default {
6669
}
6770
}
6871
</script>
72+
73+
<style>
74+
.c-icon {
75+
display: inline-block;
76+
color: inherit;
77+
text-align: center;
78+
fill: currentColor;
79+
width: 1rem;
80+
height: 1rem;
81+
font-size: 1rem;
82+
}
83+
84+
.c-icon-2xl {
85+
width: 2rem;
86+
height: 2rem;
87+
font-size: 2rem;
88+
}
89+
90+
.c-icon-3xl {
91+
width: 3rem;
92+
height: 3rem;
93+
font-size: 3rem;
94+
}
95+
96+
.c-icon-4xl {
97+
width: 4rem;
98+
height: 4rem;
99+
font-size: 4rem;
100+
}
101+
102+
.c-icon-5xl {
103+
width: 5rem;
104+
height: 5rem;
105+
font-size: 5rem;
106+
}
107+
108+
.c-icon-6xl {
109+
width: 6rem;
110+
height: 6rem;
111+
font-size: 6rem;
112+
}
113+
114+
.c-icon-7xl {
115+
width: 7rem;
116+
height: 7rem;
117+
font-size: 7rem;
118+
}
119+
120+
.c-icon-8xl {
121+
width: 8rem;
122+
height: 8rem;
123+
font-size: 8rem;
124+
}
125+
126+
.c-icon-9xl {
127+
width: 9rem;
128+
height: 9rem;
129+
font-size: 9rem;
130+
}
131+
132+
.c-icon-xl {
133+
width: 1.5rem;
134+
height: 1.5rem;
135+
font-size: 1.5rem;
136+
}
137+
138+
.c-icon-lg {
139+
width: 1.25rem;
140+
height: 1.25rem;
141+
font-size: 1.25rem;
142+
}
143+
144+
.c-icon-sm {
145+
width: 0.875rem;
146+
height: 0.875rem;
147+
font-size: 0.875rem;
148+
}
149+
150+
.c-icon-c-s,
151+
.c-icon-custom-size {
152+
width: initial !important;
153+
height: initial !important;
154+
}
155+
</style>

‎package.json

Copy file name to clipboardExpand all lines: package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "coreui-icons-vue",
3-
"sideEffects": false,
43
"version": "1.0.0-alpha.1",
4+
"sideEffects": "CIcon.vue",
55
"main": "dist/coreui-icons-vue.common.js",
66
"types": "index.d.ts",
77
"scripts": {

‎vue.config.js

Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
css: {
3+
extract: false
4+
}
5+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.