@keyblade/svg-icons

SVG 图标库

使用示例

$ pnpm i @keyblade/svg-icons

// main.ts
import SvgIcons from '@keyblade/svg-icons';

app.use(SvgIcons);

通过 name 属性指定图标，name 同 svg 的文件名

<kb-svg-icon name="icon-name" />

图标扩展

可以在项目中扩展内置的图标库，需要配置如下加载器，加载器通过 Promise 返回 svg 的内容

// main.ts
import SvgIcons from '@keyblade/svg-icons';

app.use(SvgIcons, {
  async loader(name: string) {
    const module = await import(`@/assets/svg/${name}.svg?raw`);
    return module.default;
  },
});

然后通过 custom 属性标明为自定义图标，如：

<kb-svg-icon custom name="icon-name" />

Props

| 名称 | 描述 | 类型 | 默认值 | 是否必须 | | ------ | ------------------------- | ----------------- | ------- | -------- | | name | 图标名称，对应 svg 文件名 | string | - | 是 | | size | 尺寸，默认跟文本一致 | nuber|string | - | 否 | | color | 颜色，默认跟文本一致 | string | - | 否 | | custom | 是否为自定义图标 | boolean | false | 否 |