@keyblade/svg-icons 1.0.0-alpha.1 → 1.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +12 -16
  2. package/es/components/svg-icon/use-svg-attrs.js +1 -1
  3. package/es/index.js +5 -4
  4. package/es/utils.d.ts +9 -0
  5. package/es/utils.js +19 -11
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -10,9 +10,9 @@ $ pnpm i @keyblade/svg-icons
10
10
 
11
11
  ```ts
12
12
  // main.ts
13
- import SvgIcons from '@keyblade/svg-icons'
13
+ import SvgIcons from '@keyblade/svg-icons';
14
14
 
15
- app.use(SvgIcons)
15
+ app.use(SvgIcons);
16
16
  ```
17
17
 
18
18
  通过 `name` 属性指定图标，`name` 同 svg 的文件名
@@ -27,18 +27,14 @@ app.use(SvgIcons)
27
27
 
28
28
  ```ts
29
29
  // main.ts
30
- import SvgIcons from '@keyblade/svg-icons'
30
+ import SvgIcons from '@keyblade/svg-icons';
31
31
 
32
32
  app.use(SvgIcons, {
33
33
  async loader(name: string) {
34
- const svgUrl = new URL(`@/assets/svg/${name}.svg`, import.meta.url).href
35
- const res = await fetch(svgUrl)
36
- if(res.ok) {
37
- return res.text()
38
- }
39
- return Promise.reject(res.statusText)
34
+ const module = await import(`@/assets/svg/${name}.svg?raw`);
35
+ return module.default;
40
36
  },
41
- })
37
+ });
42
38
  ```
43
39
 
44
40
  然后通过 `custom` 属性标明为自定义图标，如：
@@ -49,9 +45,9 @@ app.use(SvgIcons, {
49
45
 
50
46
  ## Props
51
47
 
52
- 名称|描述|类型|默认值|是否必须|
53
- --|--|--|--|--
54
- name|图标名称，对应 svg 文件名|`string`|-|是
55
- size|尺寸，默认跟文本一致|`nuber`\|`string`|-|否
56
- color|颜色，默认跟文本一致|`string`|-|否
57
- custom|是否为自定义图标|`boolean`|`false`|否
48
+ | 名称 | 描述 | 类型 | 默认值 | 是否必须 |
49
+ | ------ | ------------------------- | ----------------- | ------- | -------- |
50
+ | name | 图标名称，对应 svg 文件名 | `string` | - | 是 |
51
+ | size | 尺寸，默认跟文本一致 | `nuber`\|`string` | - | 否 |
52
+ | color | 颜色，默认跟文本一致 | `string` | - | 否 |
53
+ | custom | 是否为自定义图标 | `boolean` | `false` | 否 |
package/es/components/svg-icon/use-svg-attrs.js CHANGED
@@ -18,7 +18,7 @@ import d from "../../_virtual/dynamic-import-helper.js";
18
18
  import { isRef as u, toRef as h, inject as f, ref as w, watch as y } from "vue";
19
19
  import { provideKey as b } from "../../config.js";
20
20
  function l(t) {
21
- const r = t.match(/width="([^"]+)"/), i = t.match(/height="([^"]+)"/), g = t.match(/viewBox="([^"]+)"/);
21
+ const r = t.match(/width=["']([^"']+)["']/), i = t.match(/height=["']([^"']+)["']/), g = t.match(/viewBox=["']([^"']+)["']/);
22
22
  let s = "0", o = "0", e = "";
23
23
  if (r && i && (s = r[1], o = i[1]), g) {
24
24
  const [, m, x, n, p] = g[1].split(/\s+|,/);
package/es/index.js CHANGED
@@ -2,14 +2,15 @@ import './style.css';
2
2
  import r from "./components/svg-icon/index.vue.js";
3
3
  /* empty css */
4
4
  import { provideKey as t } from "./config.js";
5
- import { getAllNames as c } from "./utils.js";
6
- const p = {
5
+ import { getAllNames as a, resolver as c } from "./utils.js";
6
+ const s = {
7
7
  install(o, e) {
8
8
  o.component("KbSvgIcon", r), o.provide(t, e || {});
9
9
  }
10
10
  };
11
11
  export {
12
12
  r as SvgIcon,
13
- p as default,
14
- c as getAllNames
13
+ s as default,
14
+ a as getAllNames,
15
+ c as resolver
15
16
  };
package/es/utils.d.ts CHANGED
@@ -1,2 +1,11 @@
1
1
  /** 获取所有内置的图标 name */
2
2
  export declare function getAllNames(): Promise<string[]>;
3
+ /**
4
+ * 用于 unplugin-vue-components/vite 插件配置 resolvers
5
+ * @param componentName
6
+ * @returns
7
+ */
8
+ export declare const resolver: () => (componentName: string) => {
9
+ name: string;
10
+ from: string;
11
+ } | undefined;
package/es/utils.js CHANGED
@@ -1,24 +1,32 @@
1
- var v = (g, o, t) => new Promise((r, i) => {
1
+ var r = (e, o, t) => new Promise((v, i) => {
2
2
  var m = (s) => {
3
3
  try {
4
- e(t.next(s));
5
- } catch (a) {
6
- i(a);
4
+ a(t.next(s));
5
+ } catch (g) {
6
+ i(g);
7
7
  }
8
8
  }, n = (s) => {
9
9
  try {
10
- e(t.throw(s));
11
- } catch (a) {
12
- i(a);
10
+ a(t.throw(s));
11
+ } catch (g) {
12
+ i(g);
13
13
  }
14
- }, e = (s) => s.done ? r(s.value) : Promise.resolve(s.value).then(m, n);
15
- e((t = t.apply(g, o)).next());
14
+ }, a = (s) => s.done ? v(s.value) : Promise.resolve(s.value).then(m, n);
15
+ a((t = t.apply(e, o)).next());
16
16
  });
17
17
  function c() {
18
- return v(this, null, function* () {
18
+ return r(this, null, function* () {
19
19
  return Object.keys(/* @__PURE__ */ Object.assign({ "./assets/svgs/activity-calendar.svg": () => import("./assets/svgs/activity-calendar.svg.js"), "./assets/svgs/activity-footprint.svg": () => import("./assets/svgs/activity-footprint.svg.js"), "./assets/svgs/activity-management.svg": () => import("./assets/svgs/activity-management.svg.js"), "./assets/svgs/arrow-down.svg": () => import("./assets/svgs/arrow-down.svg.js"), "./assets/svgs/close.svg": () => import("./assets/svgs/close.svg.js"), "./assets/svgs/code-verification-machine-management.svg": () => import("./assets/svgs/code-verification-machine-management.svg.js"), "./assets/svgs/content-audit-log.svg": () => import("./assets/svgs/content-audit-log.svg.js"), "./assets/svgs/customer-service.svg": () => import("./assets/svgs/customer-service.svg.js"), "./assets/svgs/date.svg": () => import("./assets/svgs/date.svg.js"), "./assets/svgs/department-management.svg": () => import("./assets/svgs/department-management.svg.js"), "./assets/svgs/discount-certificate-authentication.svg": () => import("./assets/svgs/discount-certificate-authentication.svg.js"), "./assets/svgs/display-content-configuration.svg": () => import("./assets/svgs/display-content-configuration.svg.js"), "./assets/svgs/distribution-management.svg": () => import("./assets/svgs/distribution-management.svg.js"), "./assets/svgs/enterprise-account-management.svg": () => import("./assets/svgs/enterprise-account-management.svg.js"), "./assets/svgs/enterprise-application-statistics.svg": () => import("./assets/svgs/enterprise-application-statistics.svg.js"), "./assets/svgs/enterprise-registration-management.svg": () => import("./assets/svgs/enterprise-registration-management.svg.js"), "./assets/svgs/enterprise.svg": () => import("./assets/svgs/enterprise.svg.js"), "./assets/svgs/entertainment-module-decoration.svg": () => import("./assets/svgs/entertainment-module-decoration.svg.js"), "./assets/svgs/entertainment.svg": () => import("./assets/svgs/entertainment.svg.js"), "./assets/svgs/feedback-suggestion.svg": () => import("./assets/svgs/feedback-suggestion.svg.js"), "./assets/svgs/food-module-decoration.svg": () => import("./assets/svgs/food-module-decoration.svg.js"), "./assets/svgs/grass-planting-interaction.svg": () => import("./assets/svgs/grass-planting-interaction.svg.js"), "./assets/svgs/group-buying-center.svg": () => import("./assets/svgs/group-buying-center.svg.js"), "./assets/svgs/help-center-alt.svg": () => import("./assets/svgs/help-center-alt.svg.js"), "./assets/svgs/help-center.svg": () => import("./assets/svgs/help-center.svg.js"), "./assets/svgs/home-topic-decoration.svg": () => import("./assets/svgs/home-topic-decoration.svg.js"), "./assets/svgs/home.svg": () => import("./assets/svgs/home.svg.js"), "./assets/svgs/hotel-homestay.svg": () => import("./assets/svgs/hotel-homestay.svg.js"), "./assets/svgs/hotel-module-decoration.svg": () => import("./assets/svgs/hotel-module-decoration.svg.js"), "./assets/svgs/live-video-management.svg": () => import("./assets/svgs/live-video-management.svg.js"), "./assets/svgs/local-scenic.svg": () => import("./assets/svgs/local-scenic.svg.js"), "./assets/svgs/marketing-activity.svg": () => import("./assets/svgs/marketing-activity.svg.js"), "./assets/svgs/marketing-center.svg": () => import("./assets/svgs/marketing-center.svg.js"), "./assets/svgs/member-center.svg": () => import("./assets/svgs/member-center.svg.js"), "./assets/svgs/merchant-store-statistics.svg": () => import("./assets/svgs/merchant-store-statistics.svg.js"), "./assets/svgs/message-center-alt.svg": () => import("./assets/svgs/message-center-alt.svg.js"), "./assets/svgs/message-center.svg": () => import("./assets/svgs/message-center.svg.js"), "./assets/svgs/order-sales-statistics.svg": () => import("./assets/svgs/order-sales-statistics.svg.js"), "./assets/svgs/platform-announcement.svg": () => import("./assets/svgs/platform-announcement.svg.js"), "./assets/svgs/platform-configuration.svg": () => import("./assets/svgs/platform-configuration.svg.js"), "./assets/svgs/platform-coupon-backup.svg": () => import("./assets/svgs/platform-coupon-backup.svg.js"), "./assets/svgs/platform-coupon.svg": () => import("./assets/svgs/platform-coupon.svg.js"), "./assets/svgs/platform-message.svg": () => import("./assets/svgs/platform-message.svg.js"), "./assets/svgs/platform-operation.svg": () => import("./assets/svgs/platform-operation.svg.js"), "./assets/svgs/product-dimension-statistics.svg": () => import("./assets/svgs/product-dimension-statistics.svg.js"), "./assets/svgs/promoter-management.svg": () => import("./assets/svgs/promoter-management.svg.js"), "./assets/svgs/role-management.svg": () => import("./assets/svgs/role-management.svg.js"), "./assets/svgs/route-customization.svg": () => import("./assets/svgs/route-customization.svg.js"), "./assets/svgs/route-module-decoration.svg": () => import("./assets/svgs/route-module-decoration.svg.js"), "./assets/svgs/scenic-ticket.svg": () => import("./assets/svgs/scenic-ticket.svg.js"), "./assets/svgs/separator.svg": () => import("./assets/svgs/separator.svg.js"), "./assets/svgs/settlement-statistics.svg": () => import("./assets/svgs/settlement-statistics.svg.js"), "./assets/svgs/shopping.svg": () => import("./assets/svgs/shopping.svg.js"), "./assets/svgs/smart-itinerary.svg": () => import("./assets/svgs/smart-itinerary.svg.js"), "./assets/svgs/statistics-dashboard.svg": () => import("./assets/svgs/statistics-dashboard.svg.js"), "./assets/svgs/strategy-management.svg": () => import("./assets/svgs/strategy-management.svg.js"), "./assets/svgs/system-log.svg": () => import("./assets/svgs/system-log.svg.js"), "./assets/svgs/tenant.svg": () => import("./assets/svgs/tenant.svg.js"), "./assets/svgs/ticket-economy.svg": () => import("./assets/svgs/ticket-economy.svg.js"), "./assets/svgs/top-add.svg": () => import("./assets/svgs/top-add.svg.js"), "./assets/svgs/top-download.svg": () => import("./assets/svgs/top-download.svg.js"), "./assets/svgs/travel.svg": () => import("./assets/svgs/travel.svg.js"), "./assets/svgs/up.svg": () => import("./assets/svgs/up.svg.js"), "./assets/svgs/user-dimension-statistics.svg": () => import("./assets/svgs/user-dimension-statistics.svg.js"), "./assets/svgs/user-management.svg": () => import("./assets/svgs/user-management.svg.js"), "./assets/svgs/vote-management.svg": () => import("./assets/svgs/vote-management.svg.js") })).map((t) => t.replace(/^.*\/([^\/]+)\.svg$/, "$1"));
20
20
  });
21
21
  }
22
+ const l = () => (e) => {
23
+ if (e === "KbSvgIcon")
24
+ return {
25
+ name: "SvgIcon",
26
+ from: "@keyblade/svg-icons"
27
+ };
28
+ };
22
29
  export {
23
- c as getAllNames
30
+ c as getAllNames,
31
+ l as resolver
24
32
  };
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@keyblade/svg-icons",
3
3
  "description": "KeyBlade SVG Icons",
4
4
  "author": "yangshuai <704807396@qq.com>",
5
- "version": "1.0.0-alpha.1",
5
+ "version": "1.0.0-alpha.3",
6
6
  "private": false,
7
7
  "type": "module",
8
8
  "main": "es/index.js",