@keyblade/svg-icons 1.0.0-alpha.0 → 1.0.0-alpha.2

package/README.md

@@ -1,4 +1,57 @@
 # @keyblade/svg-icons
 
-svg 图标库
+SVG 图标库
 
+## 使用示例
+
+```bash
+$ pnpm i @keyblade/svg-icons
+```
+
+```ts
+// main.ts
+import SvgIcons from '@keyblade/svg-icons'
+
+app.use(SvgIcons)
+```
+
+通过 `name` 属性指定图标，`name` 同 svg 的文件名
+
+```html
+<kb-svg-icon name="icon-name" />
+```
+
+## 图标扩展
+
+可以在项目中扩展内置的图标库，需要配置如下加载器，加载器通过 `Promise` 返回 svg 的内容
+
+```ts
+// main.ts
+import SvgIcons from '@keyblade/svg-icons'
+
+app.use(SvgIcons, {
+  async loader(name: string) {
+    const svgUrl = new URL(`@/assets/svg/${name}.svg`, import.meta.url).href
+    const res = await fetch(svgUrl)
+    if(res.ok) {
+      return res.text()
+    }
+    return Promise.reject(res.statusText)
+  },
+})
+```
+
+然后通过 `custom` 属性标明为自定义图标，如：
+
+```html
+<kb-svg-icon custom name="icon-name" />
+```
+
+## Props
+
+名称|描述|类型|默认值|是否必须|
+--|--|--|--|--
+name|图标名称，对应 svg 文件名|`string`|-|是
+size|尺寸，默认跟文本一致|`nuber`\|`string`|-|否
+color|颜色，默认跟文本一致|`string`|-|否
+custom|是否为自定义图标|`boolean`|`false`|否

package/es/components/svg-icon/use-svg-attrs.js

@@ -18,7 +18,7 @@ import d from "../../_virtual/dynamic-import-helper.js";
 import { isRef as u, toRef as h, inject as f, ref as w, watch as y } from "vue";
 import { provideKey as b } from "../../config.js";
 function l(t) {
-  const r = t.match(/width="([^"]+)"/), i = t.match(/height="([^"]+)"/), g = t.match(/viewBox="([^"]+)"/);
+  const r = t.match(/width=["']([^"']+)["']/), i = t.match(/height=["']([^"']+)["']/), g = t.match(/viewBox=["']([^"']+)["']/);
   let s = "0", o = "0", e = "";
   if (r && i && (s = r[1], o = i[1]), g) {
     const [, m, x, n, p] = g[1].split(/\s+|,/);

package/es/index.d.ts

@@ -1,6 +1,9 @@
 import { App } from 'vue';
 import { SvgIconOptions } from './types';
+import { default as SvgIcon } from './components/svg-icon/index.vue';
+export * from './types';
 export * from './utils';
+export { SvgIcon, };
 declare const _default: {
     install(app: App, options?: SvgIconOptions): void;
 };

package/es/index.js

@@ -2,13 +2,14 @@ import './style.css';
 import r from "./components/svg-icon/index.vue.js";
 /* empty css                               */
 import { provideKey as t } from "./config.js";
-import { getAllNames as s } from "./utils.js";
+import { getAllNames as c } from "./utils.js";
 const p = {
   install(o, e) {
-    o.component("KbSvgIcon", r), o.provide(t, e);
+    o.component("KbSvgIcon", r), o.provide(t, e || {});
   }
 };
 export {
+  r as SvgIcon,
   p as default,
-  s as getAllNames
+  c as getAllNames
 };

package/package.json

@@ -2,11 +2,12 @@
   "name": "@keyblade/svg-icons",
   "description": "KeyBlade SVG Icons",
   "author": "yangshuai <704807396@qq.com>",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.2",
   "private": false,
   "type": "module",
   "main": "es/index.js",
   "module": "es/index.js",
+  "homepage": "https://keyblade-docs.gcongo.com.cn/component-library/keyblade/keyblade/svg-icons/start.html",
   "files": [
     "es",
     "package.json",