@@ -58,50 +58,67 @@ export const VPIcon = defineComponent({
58
58
type : String ,
59
59
default : '' ,
60
60
} ,
61
+
62
+ /**
63
+ * Icon sizing
64
+ *
65
+ * 图标尺寸
66
+ *
67
+ * @default 'height' in main content, and 'both' in others
68
+ */
69
+ sizing : {
70
+ type : String as PropType < 'both' | 'height' | 'width' | undefined > ,
71
+ default : 'height' ,
72
+ } ,
61
73
} ,
62
74
63
75
setup ( props ) {
64
- const style = computed ( ( ) => {
76
+ const imageLink = computed ( ( ) =>
77
+ isLinkHttp ( props . icon )
78
+ ? props . icon
79
+ : isLinkAbsolute ( props . icon )
80
+ ? withBase ( props . icon )
81
+ : null ,
82
+ )
83
+
84
+ const attrs = computed ( ( ) => {
85
+ const attrsObject : Record < string , unknown > = { }
65
86
const styleObject : CSSProperties = { }
87
+ const { type, verticalAlign, size, sizing } = props
66
88
67
- if ( props . color ) styleObject . color = props . color
89
+ if ( size )
90
+ styleObject [ '--icon-size' ] = Number . isNaN ( Number ( size ) )
91
+ ? ( size as string )
92
+ : `${ size } px`
93
+ if ( verticalAlign ) styleObject [ '--icon-vertical-align' ] = verticalAlign
68
94
69
- if ( props . size )
70
- styleObject . fontSize = Number . isNaN ( Number ( props . size ) )
71
- ? ( props . size as string )
72
- : `${ props . size } px`
73
- if ( props . verticalAlign ) styleObject . verticalAlign = props . verticalAlign
95
+ if ( type === 'iconify' ) {
96
+ if ( sizing !== 'height' ) attrsObject . width = props . size || '1em'
97
+ if ( sizing !== 'width' ) attrsObject . height = props . size || '1em'
98
+ }
74
99
75
- return keys ( styleObject ) . length ? styleObject : null
100
+ if ( props . sizing ) attrsObject . sizing = props . sizing
101
+ if ( keys ( styleObject ) . length ) attrsObject . style = styleObject
102
+
103
+ return attrsObject
76
104
} )
77
105
78
106
const appendFontawesomePrefix = ( icon : string ) : string =>
79
107
icon . includes ( 'fa-' ) || / ^ f a .$ / . test ( icon ) ? icon : `fa-${ icon } `
80
108
81
109
return ( ) : VNode | null => {
82
- const { type, icon, prefix } = props
110
+ const { type, icon, prefix, sizing } = props
83
111
84
112
if ( ! icon ) return null
85
113
86
- if ( isLinkHttp ( icon ) ) {
114
+ if ( imageLink . value ) {
87
115
return h ( 'img' , {
88
116
'class' : 'vp-icon' ,
89
- 'src' : icon ,
117
+ 'src' : imageLink . value ,
90
118
'alt' : '' ,
91
119
'aria-hidden' : '' ,
92
120
'no-view' : '' ,
93
- 'style' : style . value ,
94
- } )
95
- }
96
-
97
- if ( isLinkAbsolute ( icon ) ) {
98
- return h ( 'img' , {
99
- 'class' : 'vp-icon' ,
100
- 'src' : withBase ( icon ) ,
101
- 'alt' : '' ,
102
- 'aria-hidden' : '' ,
103
- 'no-view' : '' ,
104
- 'style' : style . value ,
121
+ ...attrs . value ,
105
122
} )
106
123
}
107
124
@@ -111,8 +128,7 @@ export const VPIcon = defineComponent({
111
128
class : 'vp-icon' ,
112
129
// if a icon set is provided, do not add prefix
113
130
icon : icon . includes ( ':' ) ? icon : `${ prefix } ${ icon } ` ,
114
- inline : '' ,
115
- style : style . value ,
131
+ ...attrs . value ,
116
132
} )
117
133
}
118
134
@@ -125,15 +141,14 @@ export const VPIcon = defineComponent({
125
141
key : icon ,
126
142
class : [
127
143
'vp-icon' ,
128
-
129
144
// declare icon type
130
145
iconType . length === 1
131
146
? `fa${ iconType } `
132
147
: appendFontawesomePrefix ( iconType ) ,
133
-
134
148
...rest . split ( ' ' ) . map ( appendFontawesomePrefix ) ,
149
+ sizing === 'height' ? '' : 'fa-fw' ,
135
150
] ,
136
- style : style . value ,
151
+ ... attrs . value ,
137
152
} )
138
153
}
139
154
@@ -144,7 +159,7 @@ export const VPIcon = defineComponent({
144
159
// if multiple classes are provided, do not add prefix
145
160
icon . includes ( ' ' ) ? icon : `${ prefix } ${ icon } ` ,
146
161
] ,
147
- style : style . value ,
162
+ ... attrs . value ,
148
163
} )
149
164
}
150
165
} ,
0 commit comments