uniui图标库 icon 怎么使用
时间: 2024-10-08 21:05:33 浏览: 7
UniUI是一个基于Vue.js的开源UI框架,其中的Icon组件提供了一套丰富的矢量图标供开发者使用。使用uniUI Icon库的步骤如下:
1. 安装依赖:首先需要安装uni-app的依赖,如果还没有全局安装,可以运行`npm install uni-app -g`或`yarn global add uni-app`。
2. 引入图标库:在项目中引入uni-icons相关的CSS样式文件,通常是在`<template>`标签外的`<style>`部分添加`@import 'uni-ui/icons/style.css';`。
3. 使用icon标签:在Vue组件模板里,你可以使用`<uni-icon>`标签来显示图标。例如,展示一个"home"图标,写作`<uni-icon type="home"></uni-icon>`。uni-icon支持type属性指定图标名称,也可以通过data或v-bind动态绑定图标类型。
4. 状态和大小调整:如果你想改变图标的状态(如默认、加载、错误等),可以使用"data-status"属性。同样,你还可以设置"size"属性调整图标尺寸。
```html
<template>
<view>
<uni-icon :type="'home'" :status="status" size="30"></uni-icon>
</view>
</template>
<script>
export default {
data() {
return {
status: 'default', // 可选值有'default', 'loading', 'error'
};
},
};
</script>
```