wip-uno css iconify

package.json

@@ -71,6 +71,7 @@
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.44.0",
     "@typescript-eslint/parser": "^5.44.0",
+    "@unocss/preset-icons": "^0.46.5",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
@@ -87,8 +88,7 @@
     "unocss-preset-weapp": "^0.2.4",
     "unplugin-vue-components": "^0.22.11",
     "vite": "^3.2.4",
-    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-eslint": "^1.8.1"
-    "vite-plugin-purge-icons": "^0.9.1"
   },
   "husky": {
     "hooks": {

pnpm-lock.yaml

@@ -27,6 +27,7 @@ specifiers:
   '@types/qs': ^6.9.7
   '@typescript-eslint/eslint-plugin': ^5.44.0
   '@typescript-eslint/parser': ^5.44.0
+  '@unocss/preset-icons': ^0.46.5
   autoprefixer: ^10.4.13
   crypto-js: ^4.1.1
   echarts: ^5.4.0
@@ -91,6 +92,7 @@ devDependencies:
   '@types/qs': registry.npmmirror.com/@types/qs/6.9.7
   '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.44.0_fnsv2sbzcckq65bwfk7a5xwslu
   '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.44.0_hsf322ms6xhhd4b5ne6lb74y4a
+  '@unocss/preset-icons': registry.npmmirror.com/@unocss/preset-icons/0.46.5
   autoprefixer: registry.npmmirror.com/autoprefixer/10.4.13_postcss@8.4.19
   eslint: registry.npmmirror.com/eslint/8.28.0
   eslint-config-prettier: registry.npmmirror.com/eslint-config-prettier/8.5.0_eslint@8.28.0

src/components/Iconify/index.vue

@@ -1,48 +1,12 @@
 <script lang="ts" setup name="Iconify">
-  // import '@purge-icons/generated';
-  // const props = defineProps({
-  //   icon: {
-  //     type: String,
-  //   },
-  // });
-  import Iconify from '@purge-icons/generated';
-  import { nextTick, ref, unref, watchEffect } from 'vue';
   const props = defineProps({
-    name: {
+    icon: {
       type: String,
-      default: () => '',
-    },
-    prefix: {
-      type: String,
-      default: () => 'ant-design',
     },
   });
-  const elRef = ref<Element>();
-  const update = async () => {
-    const el = unref(elRef);
-    if (!el) return;
-    await nextTick();
-    const icon = props.prefix + ':' + props.name;
-    if (!icon) return;
-    const svg = Iconify.renderSVG(icon, {
-      width: '1.2em',
-      height: '1.2em',
-    });
-    if (svg) {
-      el.textContent = '';
-      el.appendChild(svg);
-    } else {
-      const span = document.createElement('span');
-      span.className = 'iconify';
-      span.dataset.icon = icon;
-      el.textContent = '';
-      el.appendChild(span);
-    }
-  };
-  watchEffect(() => update());
 </script>
 <template>
-  <view ref="elRef" class="iconify m-iconify" class="anticon"></view>
+  <view ref="elRef" class="iconify m-iconify i-ph-anchor-simple-thin"></view>
 </template>
 <style lang="scss" scoped>
   .iconify {

src/main.ts

@@ -1,9 +1,7 @@
 import { createSSRApp } from 'vue';
 import App from './App.vue';
 import { setupStore } from '@/state';
-import '@/assets/style/main.scss';
+// import '@/assets/style/main.scss';
-import '@/components/FontAwesomeIcon/index.scss';
-import '@purge-icons/generated';
 import 'uno.css';
 
 export function createApp() {

unocss.config.js

@@ -3,7 +3,12 @@
  * */
 
 import presetWeapp from 'unocss-preset-weapp';
-import { defineConfig, presetIcons } from 'unocss';
+import {
+  defineConfig,
+  presetIcons,
+  presetUno,
+  presetAttributify,
+} from 'unocss';
 import {
   defaultAttributes,
   defaultIgnoreNonValuedAttributes,
@@ -33,6 +38,8 @@ export default defineConfig({
       nonValuedAttribute: true,
       prefix: 'uno-',
     }),
+    presetAttributify({}),
+    presetUno(),
     presetIcons({
       scale: 1.2,
       warn: true,

vite.config.ts

@@ -4,7 +4,6 @@ import eslintPlugin from 'vite-plugin-eslint';
 import { resolve } from 'path';
 import { loadEnv } from 'vite';
 import Unocss from 'unocss/vite';
-import PurgeIcons from 'vite-plugin-purge-icons';
 
 // https://vitejs.cn/config/
 export default ({ mode }: ConfigEnv): UserConfig => {
@@ -40,17 +39,6 @@ export default ({ mode }: ConfigEnv): UserConfig => {
     plugins: [
       uni(),
       Unocss(),
-      PurgeIcons({
-        content: [
-          '**/*.html',
-          '**/*.js',
-          '**/*.ts',
-          '**/*.vue',
-          '**/*.jsx',
-          '**/*.tsx',
-          '**/*.json',
-        ],
-      }),
       // eslintPlugin({
       //   include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],
       //   exclude: ['./node_modules/**'],