From daa934c8986b5f520aa7e230b96130589ef7fb0b Mon Sep 17 00:00:00 2001
From: cps8 <806637468@qq.com>
Date: Tue, 17 Dec 2024 09:22:07 +0800
Subject: [PATCH 1/2] =?UTF-8?q?nvue=E4=B8=AD=E4=BD=BF=E7=94=A8=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89icon;=20=E4=BD=BF=E7=94=A8=E6=96=B9=E5=BC=8F(?=
 =?UTF-8?q?=E8=BF=99=E9=87=8C=E6=98=AF=E4=BB=A5=E6=9C=AC=E5=9C=B0icon?=
 =?UTF-8?q?=E4=B8=BA=E4=BE=8B)=EF=BC=9A=201.=20=E5=9C=A8=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E5=BA=93(=E5=A6=82=E9=98=BF=E9=87=8C=E7=9F=A2=E9=87=8F?=
 =?UTF-8?q?=E5=9B=BE=E5=BA=93)=E5=AE=9A=E4=B9=89=E5=A5=BD=E8=87=AA?=
 =?UTF-8?q?=E5=B7=B1=E7=9A=84=E9=A1=B9=E7=9B=AE,=20=E5=9C=A8=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E8=AE=BE=E7=BD=AE=E4=B8=AD=E8=AE=BE=E7=BD=AE=E5=A5=BD?=
 =?UTF-8?q?'FontClass/Symbol=20=E5=89=8D=E7=BC=80'=E5=92=8C'Font=20Family'?=
 =?UTF-8?q?,=20=E6=AF=94=E5=A6=82=E2=80=98FontClass/Symbol=20=E5=89=8D?=
 =?UTF-8?q?=E7=BC=80=E2=80=99=3D'my-ico-',=20'Font=20Family'=3D'ciconfont'?=
 =?UTF-8?q?,=20=E5=AD=97=E4=BD=93=E6=A0=BC=E5=BC=8F=E5=8B=BE=E9=80=89ttf?=
 =?UTF-8?q?=202.=20=E4=BB=A3=E7=A0=81=E4=B8=AD=E4=BD=BF=E7=94=A8:=20=20=20?=
 =?UTF-8?q?2.1.=20=E5=AF=BC=E5=85=A5=E5=AD=97=E4=BD=93=E6=96=87=E4=BB=B6,?=
 =?UTF-8?q?=20=E5=AE=9A=E4=B9=89UnicodeMap=E6=96=87=E4=BB=B6=E5=B9=B6?=
 =?UTF-8?q?=E5=AF=BC=E5=85=A5,=20=20=E6=B3=A8=E6=84=8F:=20UnicodeMap?=
 =?UTF-8?q?=E7=9A=84key=E4=B8=BA=E7=AC=AC1=E6=AD=A5=E4=B8=AD=E7=9A=84FontC?=
 =?UTF-8?q?lass/Symbol=20=E5=89=8D=E7=BC=80=20+=20=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=9A=84Font=20Class=20/=20Symbol,=20value?=
 =?UTF-8?q?=E6=98=AF=E5=9B=BE=E6=A0=87=E6=96=87=E4=BB=B6=E7=9A=84Unicode?=
 =?UTF-8?q?=E5=80=BC=E4=B8=94=E4=BB=A5'\u'=E5=BC=80=E5=A4=B4,=20=E6=AF=94?=
 =?UTF-8?q?=E5=A6=82'my-ico-bulb-outline'=3D'\ue6b5'=20=20=20=20=20import?=
 =?UTF-8?q?=20usFontUrl=20from=20'@/assets/my-icon-ciconfont/iconfont.ttf'?=
 =?UTF-8?q?;=20=20=20=20=20import=20usIcons=20from=20'@/assets/my-icon-cic?=
 =?UTF-8?q?onfont/iconUnicodeMap';=20=20=202.2.=20=E5=9C=A8data=E4=B8=AD?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=BF=94=E5=9B=9E=E5=AD=97=E6=AE=B5=20=20=20?=
 =?UTF-8?q?=20=20export=20default=20{=20=20=20=20=20=20=20data()=20{=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20return=20{=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20customFontUrl:=20usFontUrl,=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?customIcons:=20usIcons=20=20=20=20=20=20=20=20=20}=20=20=20=20?=
 =?UTF-8?q?=20=20=20}=20=20=20=20=20}=20=20=202.3.=20=E5=9C=A8icon?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=AD=E4=BD=BF=E7=94=A8,=20customPrefix?=
 =?UTF-8?q?=E4=B8=BA=E7=AC=AC1=E6=AD=A5=E4=B8=AD=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E7=9A=84FontClass/Symbol=20=E5=89=8D=E7=BC=80=E4=B8=8D?=
 =?UTF-8?q?=E5=90=AB=E6=9C=80=E5=90=8E=E7=9A=84=E7=9F=AD=E6=A8=AA=E7=BA=BF?=
 =?UTF-8?q?,=20customFontFamily=E4=B8=BA=E7=AC=AC1=E6=AD=A5=E4=B8=AD?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E7=9A=84Font=20Family,=20name=E6=98=AF2.1?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E7=9A=84UnicodeMap=E4=B8=AD=E7=9A=84key?=
 =?UTF-8?q?=E4=B8=8D=E5=8C=85=E5=90=ABFontClass/Symbol=20=E5=89=8D?=
 =?UTF-8?q?=E7=BC=80=E9=83=A8=E5=88=86=20=20=20=20=20<up-icon=20name=3D"bu?=
 =?UTF-8?q?lb-outline"=20size=3D"36"=20customPrefix=3D"my-icon"=20customFo?=
 =?UTF-8?q?ntFamily=3D"ciconfont"=20:customFontUrl=3D"customFontUrl"=20:cu?=
 =?UTF-8?q?stomIcons=3D"customIcons"></up-icon>=20=20=202.4.=20=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E4=B8=80=E4=B8=AAclass,=20=E4=BD=BF=E7=94=A8=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89icon,=20class=E5=90=8D=E4=B8=BAcustomPrefix?=
 =?UTF-8?q?=E7=9A=84=E5=80=BC,=20=E4=B8=BA=E4=BA=86=E6=96=B9=E4=BE=BF?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E4=BD=BF=E7=94=A8=EF=BC=8C=E5=8F=AF=E5=9C=A8?=
 =?UTF-8?q?App.vue=E4=B8=AD=E5=AE=9A=E4=B9=89=20=20=20=20=20.us-icon=20{?=
 =?UTF-8?q?=20=20=20=20=20=20=20font-family:=20my-icon-ciconfont;=20=20=20?=
 =?UTF-8?q?=20=20=20=20text-decoration:=20none;=20=20=20=20=20=20=20text-a?=
 =?UTF-8?q?lign:=20center;=20=20=20=20=20}?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../uview-plus/components/u-icon/u-icon.vue   | 392 +++++++++---------
 1 file changed, 193 insertions(+), 199 deletions(-)

diff --git a/src/uni_modules/uview-plus/components/u-icon/u-icon.vue b/src/uni_modules/uview-plus/components/u-icon/u-icon.vue
index aa1bca611..83160f8e1 100644
--- a/src/uni_modules/uview-plus/components/u-icon/u-icon.vue
+++ b/src/uni_modules/uview-plus/components/u-icon/u-icon.vue
@@ -1,242 +1,236 @@
 <template>
-	<view
-	    class="u-icon"
-	    @tap="clickHandler"
-	    :class="['u-icon--' + labelPos]"
-	>
-		<image
-		    class="u-icon__img"
-		    v-if="isImg"
-		    :src="name"
-		    :mode="imgMode"
-		    :style="[imgStyle, addStyle(customStyle)]"
-		></image>
-		<text
-		    v-else
-		    class="u-icon__icon"
-		    :class="uClasses"
-		    :style="[iconStyle, addStyle(customStyle)]"
-		    :hover-class="hoverClass"
-		>{{icon}}</text>
+	<view class="u-icon" @tap="clickHandler" :class="['u-icon--' + labelPos]">
+		<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle, addStyle(customStyle)]">
+		</image>
+		<text v-else class="u-icon__icon" :class="uClasses" :style="[iconStyle, addStyle(customStyle)]"
+			:hover-class="hoverClass">{{ icon }}</text>
 		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
-		<text
-		    v-if="label !== ''" 
-		    class="u-icon__label"
-		    :style="{
+		<text v-if="label !== ''" class="u-icon__label" :style="{
 			color: labelColor,
 			fontSize: addUnit(labelSize),
 			marginLeft: labelPos == 'right' ? addUnit(space) : 0,
 			marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
 			marginRight: labelPos == 'left' ? addUnit(space) : 0,
 			marginBottom: labelPos == 'top' ? addUnit(space) : 0,
-		}"
-		>{{ label }}</text>
+		}">{{ label }}</text>
 	</view>
 </template>
 
 <script>
-	// #ifdef APP-NVUE
-	// nvue通过weex的dom模块引入字体，相关文档地址如下：
-	// https://weex.apache.org/zh/docs/modules/dom.html#addrule
-	const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
-	const domModule = weex.requireModule('dom')
-	domModule.addRule('fontFace', {
-		'fontFamily': "uicon-iconfont",
-		'src': `url('${fontUrl}')`
-	})
-	// #endif
-
-	// 引入图标名称，已经对应的unicode
-	import icons from './icons'
-	import { props } from './props';
-	import { mpMixin } from '../../libs/mixin/mpMixin';
-	import { mixin } from '../../libs/mixin/mixin';
-	import { addUnit, addStyle } from '../../libs/function/index';
-	import config from '../../libs/config/config';
-	/**
-	 * icon 图标
-	 * @description 基于字体的图标集，包含了大多数常见场景的图标。
-	 * @tutorial https://ijry.github.io/uview-plus/components/icon.html
-	 * @property {String}			name			图标名称，见示例图标集
-	 * @property {String}			color			图标颜色,可接受主题色 （默认 color['u-content-color'] ）
-	 * @property {String | Number}	size			图标字体大小，单位px （默认 '16px' ）
-	 * @property {Boolean}			bold			是否显示粗体 （默认 false ）
-	 * @property {String | Number}	index			点击图标的时候传递事件出去的index（用于区分点击了哪一个）
-	 * @property {String}			hoverClass		图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
-	 * @property {String}			customPrefix	自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
-	 * @property {String | Number}	label			图标右侧的label文字
-	 * @property {String}			labelPos		label相对于图标的位置，只能right或bottom （默认 'right' ）
-	 * @property {String | Number}	labelSize		label字体大小，单位px （默认 '15px' ）
-	 * @property {String}			labelColor		图标右侧的label文字颜色 （ 默认 color['u-content-color'] ）
-	 * @property {String | Number}	space			label与图标的距离，单位px （默认 '3px' ）
-	 * @property {String}			imgMode			图片的mode
-	 * @property {String | Number}	width			显示图片小图标时的宽度
-	 * @property {String | Number}	height			显示图片小图标时的高度
-	 * @property {String | Number}	top				图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
-	 * @property {Boolean}			stop			是否阻止事件传播 （默认 false ）
-	 * @property {Object}			customStyle		icon的样式，对象形式
-	 * @event {Function} click 点击图标时触发
-	 * @event {Function} touchstart 事件触摸时触发
-	 * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
-	 */
-	export default {
-		name: 'u-icon',
-		data() {
-			return {
+// #ifdef APP-NVUE
+// nvue通过weex的dom模块引入字体，相关文档地址如下：
+// https://weex.apache.org/zh/docs/modules/dom.html#addrule
+const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
+const domModule = weex.requireModule('dom')
+domModule.addRule('fontFace', {
+	'fontFamily': "uicon-iconfont",
+	'src': `url('${fontUrl}')`
+})
+// #endif
+
+// 引入图标名称，已经对应的unicode
+import icons from './icons'
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, addStyle } from '../../libs/function/index';
+import config from '../../libs/config/config';
+/**
+ * icon 图标
+ * @description 基于字体的图标集，包含了大多数常见场景的图标。
+ * @tutorial https://ijry.github.io/uview-plus/components/icon.html
+ * @property {String}			name			图标名称，见示例图标集
+ * @property {String}			color			图标颜色,可接受主题色 （默认 color['u-content-color'] ）
+ * @property {String | Number}	size			图标字体大小，单位px （默认 '16px' ）
+ * @property {Boolean}			bold			是否显示粗体 （默认 false ）
+ * @property {String | Number}	index			点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+ * @property {String}			hoverClass		图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
+ * @property {String}			customPrefix	自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
+ * @property {String | Number}	label			图标右侧的label文字
+ * @property {String}			labelPos		label相对于图标的位置，只能right或bottom （默认 'right' ）
+ * @property {String | Number}	labelSize		label字体大小，单位px （默认 '15px' ）
+ * @property {String}			labelColor		图标右侧的label文字颜色 （ 默认 color['u-content-color'] ）
+ * @property {String | Number}	space			label与图标的距离，单位px （默认 '3px' ）
+ * @property {String}			imgMode			图片的mode
+ * @property {String | Number}	width			显示图片小图标时的宽度
+ * @property {String | Number}	height			显示图片小图标时的高度
+ * @property {String | Number}	top				图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
+ * @property {Boolean}			stop			是否阻止事件传播 （默认 false ）
+ * @property {Object}			customStyle		icon的样式，对象形式
+ * @event {Function} click 点击图标时触发
+ * @event {Function} touchstart 事件触摸时触发
+ * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
+ */
+export default {
+	name: 'u-icon',
+	beforeCreate() {
+		// #ifdef APP-NVUE
+		if (this.customFontFamily) {
+			domModule.addRule('fontFace', {
+				'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
+				'src': `url('${this.customFontUrl}')`
+			})
+		}
+		// #endif
+	},
+	data() {
+		return {
 
+		}
+	},
+	emits: ['click'],
+	mixins: [mpMixin, mixin, props],
+	computed: {
+		uClasses() {
+			let classes = []
+			classes.push(this.customPrefix + '-' + this.name)
+			// uView的自定义图标类名为u-iconfont
+			if (this.customPrefix == 'uicon') {
+				classes.push('u-iconfont')
+			} else {
+				// 不能缺少这一步，否则自定义图标会无效
+				classes.push(this.customPrefix)
 			}
+			// 主题色，通过类配置
+			if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
+			// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+			// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+			//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+			classes = classes.join(' ')
+			//#endif
+			return classes
 		},
-		emits: ['click'],
-		mixins: [mpMixin, mixin, props],
-		computed: {
-			uClasses() {
-				let classes = []
-				classes.push(this.customPrefix + '-' + this.name)
-				// uView的自定义图标类名为u-iconfont
-				if (this.customPrefix == 'uicon') {
-					classes.push('u-iconfont')
-				} else {
-					// 不能缺少这一步，否则自定义图标会无效
-					classes.push(this.customPrefix)
-				}
-				// 主题色，通过类配置
-				if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
-				// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
-				// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
-				//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
-				classes = classes.join(' ')
-				//#endif
-				return classes
-			},
-			iconStyle() {
-				let style = {}
-				style = {
-					fontSize: addUnit(this.size),
-					lineHeight: addUnit(this.size),
-					fontWeight: this.bold ? 'bold' : 'normal',
-					// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
-					top: addUnit(this.top)
-				}
-				// 非主题色值时，才当作颜色值
-				if (this.color && !config.type.includes(this.color)) style.color = this.color
-
-				return style
-			},
-			// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
-			isImg() {
-				return this.name.indexOf('/') !== -1
-			},
-			imgStyle() {
-				let style = {}
-				// 如果设置width和height属性，则优先使用，否则使用size属性
-				style.width = this.width ? addUnit(this.width) : addUnit(this.size)
-				style.height = this.height ? addUnit(this.height) : addUnit(this.size)
-				return style
-			},
-			// 通过图标名，查找对应的图标
-			icon() {
-				// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
-				if (this.customPrefix !== "uicon") return "";
-				// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
-				return icons['uicon-' + this.name] || this.name
+		iconStyle() {
+			let style = {}
+			style = {
+				fontSize: addUnit(this.size),
+				lineHeight: addUnit(this.size),
+				fontWeight: this.bold ? 'bold' : 'normal',
+				// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+				top: addUnit(this.top)
 			}
+			// 非主题色值时，才当作颜色值
+			if (this.color && !config.type.includes(this.color)) style.color = this.color
+
+			return style
+		},
+		// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+		isImg() {
+			return this.name.indexOf('/') !== -1
+		},
+		imgStyle() {
+			let style = {}
+			// 如果设置width和height属性，则优先使用，否则使用size属性
+			style.width = this.width ? addUnit(this.width) : addUnit(this.size)
+			style.height = this.height ? addUnit(this.height) : addUnit(this.size)
+			return style
 		},
-		methods: {
-			addStyle,
-			addUnit,
-			clickHandler(e) {
-				this.$emit('click', this.index, e)
-				// 是否阻止事件冒泡
-				this.stop && this.preventEvent(e)
+		// 通过图标名，查找对应的图标
+		icon() {
+			// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
+			if (this.customPrefix !== "uicon") {
+				return this.customIcons[this.customPrefix + '-' + this.name] || this.name;
 			}
+			// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
+			return icons['uicon-' + this.name] || this.name
+		}
+	},
+	methods: {
+		addStyle,
+		addUnit,
+		clickHandler(e) {
+			this.$emit('click', this.index, e)
+			// 是否阻止事件冒泡
+			this.stop && this.preventEvent(e)
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	@import "../../libs/css/components.scss";
+@import "../../libs/css/components.scss";
+
+// 变量定义
+$u-icon-primary: $u-primary !default;
+$u-icon-success: $u-success !default;
+$u-icon-info: $u-info !default;
+$u-icon-warning: $u-warning !default;
+$u-icon-error: $u-error !default;
+$u-icon-label-line-height: 1 !default;
+
+/* #ifndef APP-NVUE */
+// 非nvue下加载字体
+@font-face {
+	font-family: 'uicon-iconfont';
+	src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
+}
+
+/* #endif */
+
+.u-icon {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	align-items: center;
+
+	&--left {
+		flex-direction: row-reverse;
+		align-items: center;
+	}
 
-	// 变量定义
-	$u-icon-primary: $u-primary !default;
-	$u-icon-success: $u-success !default;
-	$u-icon-info: $u-info !default;
-	$u-icon-warning: $u-warning !default;
-	$u-icon-error: $u-error !default;
-	$u-icon-label-line-height:1 !default;
+	&--right {
+		flex-direction: row;
+		align-items: center;
+	}
 
-	/* #ifndef APP-NVUE */
-	// 非nvue下加载字体
-	@font-face {
-		font-family: 'uicon-iconfont';
-		src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
+	&--top {
+		flex-direction: column-reverse;
+		justify-content: center;
 	}
 
-	/* #endif */
+	&--bottom {
+		flex-direction: column;
+		justify-content: center;
+	}
 
-	.u-icon {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+	&__icon {
+		font-family: uicon-iconfont;
+		position: relative;
+		@include flex;
 		align-items: center;
 
-		&--left {
-			flex-direction: row-reverse;
-			align-items: center;
+		&--primary {
+			color: $u-icon-primary;
 		}
 
-		&--right {
-			flex-direction: row;
-			align-items: center;
+		&--success {
+			color: $u-icon-success;
 		}
 
-		&--top {
-			flex-direction: column-reverse;
-			justify-content: center;
+		&--error {
+			color: $u-icon-error;
 		}
 
-		&--bottom {
-			flex-direction: column;
-			justify-content: center;
+		&--warning {
+			color: $u-icon-warning;
 		}
 
-		&__icon {
-			font-family: uicon-iconfont;
-			position: relative;
-			@include flex;
-			align-items: center;
-
-			&--primary {
-				color: $u-icon-primary;
-			}
-
-			&--success {
-				color: $u-icon-success;
-			}
-
-			&--error {
-				color: $u-icon-error;
-			}
-
-			&--warning {
-				color: $u-icon-warning;
-			}
-
-			&--info {
-				color: $u-icon-info;
-			}
+		&--info {
+			color: $u-icon-info;
 		}
+	}
 
-		&__img {
-			/* #ifndef APP-NVUE */
-			height: auto;
-			will-change: transform;
-			/* #endif */
-		}
+	&__img {
+		/* #ifndef APP-NVUE */
+		height: auto;
+		will-change: transform;
+		/* #endif */
+	}
 
-		&__label {
-			/* #ifndef APP-NVUE */
-			line-height: $u-icon-label-line-height;
-			/* #endif */
-		}
+	&__label {
+		/* #ifndef APP-NVUE */
+		line-height: $u-icon-label-line-height;
+		/* #endif */
 	}
+}
 </style>

From d01c78e3aa6edbbd420a586cedd4c38270b3b67f Mon Sep 17 00:00:00 2001
From: cps8 <806637468@qq.com>
Date: Thu, 19 Dec 2024 17:28:25 +0800
Subject: [PATCH 2/2] =?UTF-8?q?nvue=E4=B8=AD=E4=BD=BF=E7=94=A8=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89icon;=20=E4=BD=BF=E7=94=A8=E6=96=B9=E5=BC=8F(?=
 =?UTF-8?q?=E8=BF=99=E9=87=8C=E6=98=AF=E4=BB=A5=E6=9C=AC=E5=9C=B0icon?=
 =?UTF-8?q?=E4=B8=BA=E4=BE=8B)=EF=BC=9A=201.=20=E5=9C=A8=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E5=BA=93(=E5=A6=82=E9=98=BF=E9=87=8C=E7=9F=A2=E9=87=8F?=
 =?UTF-8?q?=E5=9B=BE=E5=BA=93)=E5=AE=9A=E4=B9=89=E5=A5=BD=E8=87=AA?=
 =?UTF-8?q?=E5=B7=B1=E7=9A=84=E9=A1=B9=E7=9B=AE,=20=E5=9C=A8=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E8=AE=BE=E7=BD=AE=E4=B8=AD=E8=AE=BE=E7=BD=AE=E5=A5=BD?=
 =?UTF-8?q?'FontClass/Symbol=20=E5=89=8D=E7=BC=80'=E5=92=8C'Font=20Family'?=
 =?UTF-8?q?,=20=E6=AF=94=E5=A6=82=E2=80=98FontClass/Symbol=20=E5=89=8D?=
 =?UTF-8?q?=E7=BC=80=E2=80=99=3D'my-ico-',=20'Font=20Family'=3D'ciconfont'?=
 =?UTF-8?q?,=20=E5=AD=97=E4=BD=93=E6=A0=BC=E5=BC=8F=E5=8B=BE=E9=80=89ttf?=
 =?UTF-8?q?=202.=20=E4=BB=A3=E7=A0=81=E4=B8=AD=E4=BD=BF=E7=94=A8:=20=20=20?=
 =?UTF-8?q?2.1.=20=E5=AF=BC=E5=85=A5=E5=AD=97=E4=BD=93=E6=96=87=E4=BB=B6,?=
 =?UTF-8?q?=20=E5=AE=9A=E4=B9=89UnicodeMap=E6=96=87=E4=BB=B6=E5=B9=B6?=
 =?UTF-8?q?=E5=AF=BC=E5=85=A5,=20=20=E6=B3=A8=E6=84=8F:=20UnicodeMap?=
 =?UTF-8?q?=E7=9A=84key=E4=B8=BA=E7=AC=AC1=E6=AD=A5=E4=B8=AD=E7=9A=84FontC?=
 =?UTF-8?q?lass/Symbol=20=E5=89=8D=E7=BC=80=20+=20=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=9A=84Font=20Class=20/=20Symbol,=20value?=
 =?UTF-8?q?=E6=98=AF=E5=9B=BE=E6=A0=87=E6=96=87=E4=BB=B6=E7=9A=84Unicode?=
 =?UTF-8?q?=E5=80=BC=E4=B8=94=E4=BB=A5'\u'=E5=BC=80=E5=A4=B4,=20=E6=AF=94?=
 =?UTF-8?q?=E5=A6=82'my-ico-bulb-outline'=3D'\ue6b5'=20=20=20=20=20import?=
 =?UTF-8?q?=20usFontUrl=20from=20'@/assets/my-icon-ciconfont/iconfont.ttf'?=
 =?UTF-8?q?;=20=20=20=20=20import=20usIcons=20from=20'@/assets/my-icon-cic?=
 =?UTF-8?q?onfont/iconUnicodeMap';=20=20=202.2.=20=E5=9C=A8data=E4=B8=AD?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=BF=94=E5=9B=9E=E5=AD=97=E6=AE=B5=20=20=20?=
 =?UTF-8?q?=20=20export=20default=20{=20=20=20=20=20=20=20data()=20{=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20return=20{=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20customFontUrl:=20usFontUrl,=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?customIcons:=20usIcons=20=20=20=20=20=20=20=20=20}=20=20=20=20?=
 =?UTF-8?q?=20=20=20}=20=20=20=20=20}=20=20=202.3.=20=E5=9C=A8icon?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=AD=E4=BD=BF=E7=94=A8,=20customPrefix?=
 =?UTF-8?q?=E4=B8=BA=E7=AC=AC1=E6=AD=A5=E4=B8=AD=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E7=9A=84FontClass/Symbol=20=E5=89=8D=E7=BC=80=E4=B8=8D?=
 =?UTF-8?q?=E5=90=AB=E6=9C=80=E5=90=8E=E7=9A=84=E7=9F=AD=E6=A8=AA=E7=BA=BF?=
 =?UTF-8?q?,=20customFontFamily=E4=B8=BA=E7=AC=AC1=E6=AD=A5=E4=B8=AD?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E7=9A=84Font=20Family,=20name=E6=98=AF2.1?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E7=9A=84UnicodeMap=E4=B8=AD=E7=9A=84key?=
 =?UTF-8?q?=E4=B8=8D=E5=8C=85=E5=90=ABFontClass/Symbol=20=E5=89=8D?=
 =?UTF-8?q?=E7=BC=80=E9=83=A8=E5=88=86=20=20=20=20=20<up-icon=20name=3D"bu?=
 =?UTF-8?q?lb-outline"=20size=3D"36"=20customPrefix=3D"my-icon"=20customFo?=
 =?UTF-8?q?ntFamily=3D"ciconfont"=20:customFontUrl=3D"customFontUrl"=20:cu?=
 =?UTF-8?q?stomIcons=3D"customIcons"></up-icon>=20=20=202.4.=20=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E4=B8=80=E4=B8=AAclass,=20=E4=BD=BF=E7=94=A8=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89icon,=20class=E5=90=8D=E4=B8=BAcustomPrefix?=
 =?UTF-8?q?=E7=9A=84=E5=80=BC,=20=E4=B8=BA=E4=BA=86=E6=96=B9=E4=BE=BF?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E4=BD=BF=E7=94=A8=EF=BC=8C=E5=8F=AF=E5=9C=A8?=
 =?UTF-8?q?App.vue=E4=B8=AD=E5=AE=9A=E4=B9=89=20=20=20=20=20.us-icon=20{?=
 =?UTF-8?q?=20=20=20=20=20=20=20font-family:=20my-icon-ciconfont;=20=20=20?=
 =?UTF-8?q?=20=20=20=20text-decoration:=20none;=20=20=20=20=20=20=20text-a?=
 =?UTF-8?q?lign:=20center;=20=20=20=20=20}?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../uview-plus/components/u-icon/u-icon.vue   | 404 +++++++++---------
 1 file changed, 211 insertions(+), 193 deletions(-)

diff --git a/src/uni_modules/uview-plus/components/u-icon/u-icon.vue b/src/uni_modules/uview-plus/components/u-icon/u-icon.vue
index 83160f8e1..025590595 100644
--- a/src/uni_modules/uview-plus/components/u-icon/u-icon.vue
+++ b/src/uni_modules/uview-plus/components/u-icon/u-icon.vue
@@ -1,236 +1,254 @@
 <template>
-	<view class="u-icon" @tap="clickHandler" :class="['u-icon--' + labelPos]">
-		<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle, addStyle(customStyle)]">
-		</image>
-		<text v-else class="u-icon__icon" :class="uClasses" :style="[iconStyle, addStyle(customStyle)]"
-			:hover-class="hoverClass">{{ icon }}</text>
+	<view
+	    class="u-icon"
+	    @tap="clickHandler"
+	    :class="['u-icon--' + labelPos]"
+	>
+		<image
+		    class="u-icon__img"
+		    v-if="isImg"
+		    :src="name"
+		    :mode="imgMode"
+		    :style="[imgStyle, addStyle(customStyle)]"
+		></image>
+		<text
+		    v-else
+		    class="u-icon__icon"
+		    :class="uClasses"
+		    :style="[iconStyle, addStyle(customStyle)]"
+		    :hover-class="hoverClass"
+		>{{icon}}</text>
 		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
-		<text v-if="label !== ''" class="u-icon__label" :style="{
+		<text
+		    v-if="label !== ''" 
+		    class="u-icon__label"
+		    :style="{
 			color: labelColor,
 			fontSize: addUnit(labelSize),
 			marginLeft: labelPos == 'right' ? addUnit(space) : 0,
 			marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
 			marginRight: labelPos == 'left' ? addUnit(space) : 0,
 			marginBottom: labelPos == 'top' ? addUnit(space) : 0,
-		}">{{ label }}</text>
+		}"
+		>{{ label }}</text>
 	</view>
 </template>
 
 <script>
-// #ifdef APP-NVUE
-// nvue通过weex的dom模块引入字体，相关文档地址如下：
-// https://weex.apache.org/zh/docs/modules/dom.html#addrule
-const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
-const domModule = weex.requireModule('dom')
-domModule.addRule('fontFace', {
-	'fontFamily': "uicon-iconfont",
-	'src': `url('${fontUrl}')`
-})
-// #endif
-
-// 引入图标名称，已经对应的unicode
-import icons from './icons'
-import { props } from './props';
-import { mpMixin } from '../../libs/mixin/mpMixin';
-import { mixin } from '../../libs/mixin/mixin';
-import { addUnit, addStyle } from '../../libs/function/index';
-import config from '../../libs/config/config';
-/**
- * icon 图标
- * @description 基于字体的图标集，包含了大多数常见场景的图标。
- * @tutorial https://ijry.github.io/uview-plus/components/icon.html
- * @property {String}			name			图标名称，见示例图标集
- * @property {String}			color			图标颜色,可接受主题色 （默认 color['u-content-color'] ）
- * @property {String | Number}	size			图标字体大小，单位px （默认 '16px' ）
- * @property {Boolean}			bold			是否显示粗体 （默认 false ）
- * @property {String | Number}	index			点击图标的时候传递事件出去的index（用于区分点击了哪一个）
- * @property {String}			hoverClass		图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
- * @property {String}			customPrefix	自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
- * @property {String | Number}	label			图标右侧的label文字
- * @property {String}			labelPos		label相对于图标的位置，只能right或bottom （默认 'right' ）
- * @property {String | Number}	labelSize		label字体大小，单位px （默认 '15px' ）
- * @property {String}			labelColor		图标右侧的label文字颜色 （ 默认 color['u-content-color'] ）
- * @property {String | Number}	space			label与图标的距离，单位px （默认 '3px' ）
- * @property {String}			imgMode			图片的mode
- * @property {String | Number}	width			显示图片小图标时的宽度
- * @property {String | Number}	height			显示图片小图标时的高度
- * @property {String | Number}	top				图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
- * @property {Boolean}			stop			是否阻止事件传播 （默认 false ）
- * @property {Object}			customStyle		icon的样式，对象形式
- * @event {Function} click 点击图标时触发
- * @event {Function} touchstart 事件触摸时触发
- * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
- */
-export default {
-	name: 'u-icon',
-	beforeCreate() {
-		// #ifdef APP-NVUE
-		if (this.customFontFamily) {
-			domModule.addRule('fontFace', {
-				'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
-				'src': `url('${this.customFontUrl}')`
-			})
-		}
-		// #endif
-	},
-	data() {
-		return {
+	// #ifdef APP-NVUE
+	// nvue通过weex的dom模块引入字体，相关文档地址如下：
+	// https://weex.apache.org/zh/docs/modules/dom.html#addrule
+	const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
+	const domModule = weex.requireModule('dom')
+	domModule.addRule('fontFace', {
+		'fontFamily': "uicon-iconfont",
+		'src': `url('${fontUrl}')`
+	})
+	// #endif
+
+	// 引入图标名称，已经对应的unicode
+	import icons from './icons'
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle } from '../../libs/function/index';
+	import config from '../../libs/config/config';
+	/**
+	 * icon 图标
+	 * @description 基于字体的图标集，包含了大多数常见场景的图标。
+	 * @tutorial https://ijry.github.io/uview-plus/components/icon.html
+	 * @property {String}			name			图标名称，见示例图标集
+	 * @property {String}			color			图标颜色,可接受主题色 （默认 color['u-content-color'] ）
+	 * @property {String | Number}	size			图标字体大小，单位px （默认 '16px' ）
+	 * @property {Boolean}			bold			是否显示粗体 （默认 false ）
+	 * @property {String | Number}	index			点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+	 * @property {String}			hoverClass		图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
+	 * @property {String}			customPrefix	自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
+	 * @property {String | Number}	label			图标右侧的label文字
+	 * @property {String}			labelPos		label相对于图标的位置，只能right或bottom （默认 'right' ）
+	 * @property {String | Number}	labelSize		label字体大小，单位px （默认 '15px' ）
+	 * @property {String}			labelColor		图标右侧的label文字颜色 （ 默认 color['u-content-color'] ）
+	 * @property {String | Number}	space			label与图标的距离，单位px （默认 '3px' ）
+	 * @property {String}			imgMode			图片的mode
+	 * @property {String | Number}	width			显示图片小图标时的宽度
+	 * @property {String | Number}	height			显示图片小图标时的高度
+	 * @property {String | Number}	top				图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
+	 * @property {Boolean}			stop			是否阻止事件传播 （默认 false ）
+	 * @property {Object}			customStyle		icon的样式，对象形式
+	 * @event {Function} click 点击图标时触发
+	 * @event {Function} touchstart 事件触摸时触发
+	 * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
+	 */
+	export default {
+		name: 'u-icon',
+		beforeCreate() {
+			// #ifdef APP-NVUE
+			if (this.customFontFamily) {
+				domModule.addRule('fontFace', {
+					'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
+					'src': `url('${this.customFontUrl}')`
+				})
+			}
+        	// #endif
+    	},
+		data() {
+			return {
 
-		}
-	},
-	emits: ['click'],
-	mixins: [mpMixin, mixin, props],
-	computed: {
-		uClasses() {
-			let classes = []
-			classes.push(this.customPrefix + '-' + this.name)
-			// uView的自定义图标类名为u-iconfont
-			if (this.customPrefix == 'uicon') {
-				classes.push('u-iconfont')
-			} else {
-				// 不能缺少这一步，否则自定义图标会无效
-				classes.push(this.customPrefix)
 			}
-			// 主题色，通过类配置
-			if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
-			// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
-			// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
-			//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
-			classes = classes.join(' ')
-			//#endif
-			return classes
 		},
-		iconStyle() {
-			let style = {}
-			style = {
-				fontSize: addUnit(this.size),
-				lineHeight: addUnit(this.size),
-				fontWeight: this.bold ? 'bold' : 'normal',
-				// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
-				top: addUnit(this.top)
+		emits: ['click'],
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			uClasses() {
+				let classes = []
+				classes.push(this.customPrefix + '-' + this.name)
+				// uView的自定义图标类名为u-iconfont
+				if (this.customPrefix == 'uicon') {
+					classes.push('u-iconfont')
+				} else {
+					// 不能缺少这一步，否则自定义图标会无效
+					classes.push(this.customPrefix)
+				}
+				// 主题色，通过类配置
+				if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
+				// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+				// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+				//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+				classes = classes.join(' ')
+				//#endif
+				return classes
+			},
+			iconStyle() {
+				let style = {}
+				style = {
+					fontSize: addUnit(this.size),
+					lineHeight: addUnit(this.size),
+					fontWeight: this.bold ? 'bold' : 'normal',
+					// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+					top: addUnit(this.top)
+				}
+				// 非主题色值时，才当作颜色值
+				if (this.color && !config.type.includes(this.color)) style.color = this.color
+
+				return style
+			},
+			// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+			isImg() {
+				return this.name.indexOf('/') !== -1
+			},
+			imgStyle() {
+				let style = {}
+				// 如果设置width和height属性，则优先使用，否则使用size属性
+				style.width = this.width ? addUnit(this.width) : addUnit(this.size)
+				style.height = this.height ? addUnit(this.height) : addUnit(this.size)
+				return style
+			},
+			// 通过图标名，查找对应的图标
+			icon() {
+				// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
+				if (this.customPrefix !== "uicon") {
+					return this.customIcons[this.customPrefix + '-' + this.name] || this.name;
+				}
+				// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
+				return icons['uicon-' + this.name] || this.name
 			}
-			// 非主题色值时，才当作颜色值
-			if (this.color && !config.type.includes(this.color)) style.color = this.color
-
-			return style
-		},
-		// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
-		isImg() {
-			return this.name.indexOf('/') !== -1
 		},
-		imgStyle() {
-			let style = {}
-			// 如果设置width和height属性，则优先使用，否则使用size属性
-			style.width = this.width ? addUnit(this.width) : addUnit(this.size)
-			style.height = this.height ? addUnit(this.height) : addUnit(this.size)
-			return style
-		},
-		// 通过图标名，查找对应的图标
-		icon() {
-			// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
-			if (this.customPrefix !== "uicon") {
-				return this.customIcons[this.customPrefix + '-' + this.name] || this.name;
+		methods: {
+			addStyle,
+			addUnit,
+			clickHandler(e) {
+				this.$emit('click', this.index, e)
+				// 是否阻止事件冒泡
+				this.stop && this.preventEvent(e)
 			}
-			// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
-			return icons['uicon-' + this.name] || this.name
-		}
-	},
-	methods: {
-		addStyle,
-		addUnit,
-		clickHandler(e) {
-			this.$emit('click', this.index, e)
-			// 是否阻止事件冒泡
-			this.stop && this.preventEvent(e)
 		}
 	}
-}
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/components.scss";
-
-// 变量定义
-$u-icon-primary: $u-primary !default;
-$u-icon-success: $u-success !default;
-$u-icon-info: $u-info !default;
-$u-icon-warning: $u-warning !default;
-$u-icon-error: $u-error !default;
-$u-icon-label-line-height: 1 !default;
-
-/* #ifndef APP-NVUE */
-// 非nvue下加载字体
-@font-face {
-	font-family: 'uicon-iconfont';
-	src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
-}
-
-/* #endif */
-
-.u-icon {
-	/* #ifndef APP-NVUE */
-	display: flex;
-	/* #endif */
-	align-items: center;
+	@import "../../libs/css/components.scss";
 
-	&--left {
-		flex-direction: row-reverse;
-		align-items: center;
-	}
+	// 变量定义
+	$u-icon-primary: $u-primary !default;
+	$u-icon-success: $u-success !default;
+	$u-icon-info: $u-info !default;
+	$u-icon-warning: $u-warning !default;
+	$u-icon-error: $u-error !default;
+	$u-icon-label-line-height:1 !default;
 
-	&--right {
-		flex-direction: row;
-		align-items: center;
-	}
-
-	&--top {
-		flex-direction: column-reverse;
-		justify-content: center;
+	/* #ifndef APP-NVUE */
+	// 非nvue下加载字体
+	@font-face {
+		font-family: 'uicon-iconfont';
+		src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
 	}
 
-	&--bottom {
-		flex-direction: column;
-		justify-content: center;
-	}
+	/* #endif */
 
-	&__icon {
-		font-family: uicon-iconfont;
-		position: relative;
-		@include flex;
+	.u-icon {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
 		align-items: center;
 
-		&--primary {
-			color: $u-icon-primary;
+		&--left {
+			flex-direction: row-reverse;
+			align-items: center;
 		}
 
-		&--success {
-			color: $u-icon-success;
+		&--right {
+			flex-direction: row;
+			align-items: center;
 		}
 
-		&--error {
-			color: $u-icon-error;
+		&--top {
+			flex-direction: column-reverse;
+			justify-content: center;
 		}
 
-		&--warning {
-			color: $u-icon-warning;
+		&--bottom {
+			flex-direction: column;
+			justify-content: center;
 		}
 
-		&--info {
-			color: $u-icon-info;
+		&__icon {
+			font-family: uicon-iconfont;
+			position: relative;
+			@include flex;
+			align-items: center;
+
+			&--primary {
+				color: $u-icon-primary;
+			}
+
+			&--success {
+				color: $u-icon-success;
+			}
+
+			&--error {
+				color: $u-icon-error;
+			}
+
+			&--warning {
+				color: $u-icon-warning;
+			}
+
+			&--info {
+				color: $u-icon-info;
+			}
 		}
-	}
 
-	&__img {
-		/* #ifndef APP-NVUE */
-		height: auto;
-		will-change: transform;
-		/* #endif */
-	}
+		&__img {
+			/* #ifndef APP-NVUE */
+			height: auto;
+			will-change: transform;
+			/* #endif */
+		}
 
-	&__label {
-		/* #ifndef APP-NVUE */
-		line-height: $u-icon-label-line-height;
-		/* #endif */
+		&__label {
+			/* #ifndef APP-NVUE */
+			line-height: $u-icon-label-line-height;
+			/* #endif */
+		}
 	}
-}
 </style>