uniapp如何使用icon图标

UniApp中使用Icon图标非常简单。你可以使用UniApp提供的默认图标，也可以自定义Icon组件。

如果使用UniApp提供的默认图标，你只需要在需要的地方使用Icon组件，并设置type属性为相应的图标类型即可。例如：

<template>
<view>
<icon class="my-icon" type="success" />
<icon class="my-icon" type="info" />
<icon class="my-icon" type="warning" />
<icon class="my-icon" type="error" />
</view>
</template>

<style>
.my-icon {
font-size: 36rpx;
}
</style>

如果UniApp提供的默认图标无法满足需求，你可以自定义Icon组件。首先，在一个.vue文件中定义一个自定义Icon组件，例如：

<template>
<view class="custom-icon">
<text class="icon-text">{{ iconName }}</text>
</view>
</template>

<script>
export default {
props: {
iconName: {
type: String,
required: true
}
}
}
</script>

<style>
.custom-icon {
width: 100rpx;
height: 100rpx;
border: 1rpx solid #ccc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.icon-text {
font-size: 40rpx;
}
</style>

然后，在App.vue或需要使用Icon组件的页面的.vue文件中引入自定义Icon组件，例如：

<template>
<view>
<!-- 其他页面内容 -->
<icon class="my-icon" type="success" />
</view>
</template>

<script>
import icon from '@/components/uni-icon/uni-icon.vue'
export default {
components: {
icon
}
}
</script>

<style>
.my-icon {
font-size: 36rpx;
}
</style>

希望能帮到你！如果还有其他问题，请继续提问。