-----------------------------------------------------点赞收藏才是更新的动力-------------------------------------------------
unipp中使用阿里图标
- 官网下载图标
- 在项目中引入
- 使用
- 注意事项
官网下载图标
进入阿里图标网站
- 将需要下载的图标添加到购物车中
2. 直接下载代码进行解压
在项目中引入
1.在项目根目录新建文件夹如下
2.在app.vue中引入（注意引入路径）
@import url('./static/font/iconfont.css');
使用
-
通常弄成组件的形式使用，更灵活
-
新建组件在项目根目录的
components下面简历如下组件u-icons/u-icons.vue
-
u-icons.vue
<template>
<view style="display: inline-block;">
<text :class="[delcss, type]" :style="dynamicStyles"></text>
</view>
</template>
<script>
export default {
props: {
type: {
type: String,
default: ''
},
size: {
type: String,
default: '30'
},
color: {
type: String,
default: '#999'
}
},
data() {
return {
delcss: 'iconfont', //这里必须是这个值
dynamicStyles: {
"font-size": this.size + 'px',
"color": this.color
}
}
}
}
</script>
4.在页面中直接使用，比如index.vue中 （同名字的组件是不需要引入注册的，直接使用）type就是
<u-icons size="50" type="icon-gongzuojingyan" color="red" />
注意事项
建议直接在阿里图标下新建一个项目，以后每次要的图标添加进去项目中
这个文件这里有的下载下来的引入是bsae64的，一大串，
这里需要改成绝对路径，不然在h5上正常，在小程序就显示不出来
