小记Uniapp Vue3开发使用TailWind和Iconify

记录一下方便以后用

使用Uniapp 微信小程序开发使用TailWind下使用Iconify图标功能

官方文档有Vue方法和Tailwindcss方法

这里使用的是egoist/tailwindcss-icons 很方便

1、安装 @egoist/tailwindcss-icons

npm i @egoist/tailwindcss-icons -D

yarn add @egoist/tailwindcss-icons

2、配置 tailwind.config.js

const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
module.exports = {
plugins: [
    iconsPlugin({
      //这里根据自己使用的来添加我用的是solar
      collections: getIconCollections(["solar"]),
    }),
  ],
}

更多说明在官方egoist/tailwindcss-icons: Use any icon (100,000+) from Iconify, for TailwindCSS (github.com)

3、Uniapp项目根目录下components 中新建iconify.vue 组件文件用于后期使用

<template>
  <text class="iconify" :class="[props.icon]" :style="iconStyle" />
</template>

<script lang="ts" setup>
import { computed } from 'vue';
/**
 * @name Iconify
 * @desc 图标组件 使用 iconify + tailwindcss
 * 更多图标库 https://icon-sets.iconify.design/
 * @docs https://github.com/egoist/tailwindcss-icons
 * @example <Iconify icon="i-mdi-account-box" size="32" color="green" />
 */

interface Props {
  icon: string
  size?: string | number
  color?: string
}
const props = withDefaults(defineProps<Props>(), {
  size: 'inherit',
});

const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.size}` : `${props.size}rpx`));

const iconStyle = computed(() => {
  const styles: Record<string, string> = {};
  if (props.color) {
    styles.color = props.color;
  }
  if (props.size) {
    styles.fontSize = iconSize.value;
  }
  return styles;
});
</script>



<style lang="scss" scoped>
.iconify {
  display: inline-block;
  line-height: 1;
}
</style>

然后在需要使用的页面

<script setup>
import Iconify from '@/components/Iconify/index.vue';
</script>
<template>
<div>
      <Iconify icon="i-solar-4k-linear" size="64" color="blue" />
      <Iconify icon="i-solar-4k-linear" size="48" color="orange" />
      <Iconify icon="i-solar-4k-linear" size="32" class="text-green-400" />
      <Iconify icon="i-solar-4k-linear" class="text-red-400" />
      <Iconify icon="i-solar-4k-linear" />
</div>
</template>

这里感谢h_mo 他的uniapp-vue3-vite-ts-template中发现的解决方法