@medo170/browser v0.0.1

@medomino-170/font-end-utils

icon

1. 动态设置引入的图标 ./plugins/icon/dynamic.ts

import type { IconName } from "@medomino-170/font-end-utils/icon";

import {
  faUserSecret,
  faMagic,
} from "@medomino-170/font-end-utils/icon/fonts/solid";
import { faDizzy } from "@medomino-170/font-end-utils/icon/fonts/regular";
import {
  faZhihu,
  faWeixin,
} from "@medomino-170/font-end-utils/icon/fonts/brands";

export const icons = [faUserSecret, faMagic, faDizzy, faZhihu, faWeixin];

export type Name = keyof Pick<
  Record<IconName, string>,
  "user-secret" | "magic" | "dizzy" | "zhihu" | "weixin"
>;

2. 导出对应插件用于全局安装，图标允许异步 ./plugins/icon/index.ts

import { iconsInit } from "@medomino-170/font-end-utils/icon";

import type { Name } from "./dynamic";

export default iconsInit<Name>(async () => {
  const { icons } = await import("./dynamic");
  return icons;
});

3. 安装插件 main.ts

import { createApp } from "vue";
import icon from "./plugins/icon";

createApp(App).use(icon);

4. 引用图标 n 是图标名字, p 是图标前缀，默认为 s(solid)

<v-icon n="magic" />
<v-icon n="dizzy" p="r" />
<v-icon n="zhihu" p="b" />
<v-icon n="weixin" p="b" />