26a8bfba42
- 重构Iconify组件，移除点击事件处理和冗余的数字检查函数。- 添加组件文档注释，说明如何使用和可用图标库。 - 更改模板中使用的图标类名前缀以适应新组件。 - 在尾风CSS配置中引入新图标集合，并调整插件顺序。- 更新示例页面上的图标，统一使用'i-mdi-account-box'进行测试。 - 在package.json中调整mp-weixin的开发命令，移除与devtools相关的部分。- 从'tailwind.config.js'中移除预制和容器核心插件的MP适配代码。BREAKING CHANGE: 图标类名前缀已更改，这可能会影响使用自定义样式或依赖特定类名的图标组件的现有代码。请确保更新图标引用以反映这些更改。
35 lines
806 B
Vue
35 lines
806 B
Vue
<script lang="ts" setup>
|
|
/**
|
|
* @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',
|
|
color: 'inherit',
|
|
});
|
|
|
|
const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.size}` : `${props.size}rpx`));
|
|
</script>
|
|
|
|
<template>
|
|
<text class="iconify-icon" :class="[props.icon]" />
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.iconify-icon {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
font-size: v-bind('iconSize');
|
|
color: v-bind('color');
|
|
}
|
|
</style>
|