uniapp怎么使用图标

介绍

在Uniapp开发时，使用图标是非常方便的。本文将介绍如何使用图标。Uniapp内置了阿里的Iconfont，我们可以使用Iconfont提供的svg图标库，也可以导入自己的svg图标库。

使用内置Iconfont图标

使用内置Iconfont图标，我们需要先下载并导入需要使用的图标库，具体可以在iconfont官网免费下载，也可以在Uinapp插件市场搜索下载，下载后在项目中引入需要使用的图标库。

<template>
  <uni-icons name="uni-icon-add"></uni-icons>
</template>

上述代码片段中使用了uni-icons组件引入内置Iconfont里的一个图标，如需使用其他图标，只需将name属性修改为对应图标的名字即可。在使用Iconfont图标时，我们可以使用uni-icons组件，也可以直接在html文件中使用，直接调用Iconfont图标名即可。

使用自己的svg图标库

如果需要使用自己的svg图标库需要将图标库放在项目内，然后使用关键字use进行使用，具体可参考下述代码。

<template>
  <svg-icon icon-class="alipay" size="33" color="#f00"></svg-icon>
</template>

<script>
import svgIcon from '@/components/svgIcon.vue';
export default {
  components: {
    svgIcon
  }
}
</script>

自定义图标

在Uniapp中使用自定义图标可以通过iconfont来实现，需要先在iconfont网站上进行图标编辑等操作，然后下载图标库，使用uni-icons等组件进行使用。

<template>
  <uni-icons name="custom-icon-camera"></uni-icons>
</template>

上述代码中使用了自定义图标，可以通过name属性来引用同样也可以使用颜色等属性来进行自定义设置。

总结

通过本篇教程，您应该能够使用Uniapp的Iconfont图标实现您需要的功能了。可以尝试使用内置图标库和自定义图标。