ksw-vue-icon 2.5.3 → 2.6.0

package/README.md

@@ -24,7 +24,11 @@ npm install ksw-vue-icon --save-dev
 yarn add ksw-vue-icon -D
 ```
 
-### 引入样式
+### 引入样式 (`2.6.0` 版本以下)
+
+::: danger ⚠️ 注意
+`2.6.0` 版本会自动注入 `CSS` 不再需要导入样式, 并且不再提供 `CSS` 的导出
+:::
 
 导入图标样式（整个项目只需1次）:
 
@@ -79,15 +83,14 @@ Vue.use(KswIcon, { projectName: "Guangfa" });
 按需引用项目图标只需要在 `ksw-vue-icon` 后添加上 `projectName`，例如:
 
 ```js
-import { IconName } from 'ksw-vue-icon/Guangfa'
+import { IconName } from "ksw-vue-icon/Guangfa";
 ```
 
-| projectName  | 介绍                     | 
-| --------- | -------------------------- |
-| Base      |  基本图标库       |
-| Guangfa     | 广发图标库 |
-| KingAutometa     | 新RPA |
-
+| projectName  | 介绍       |
+| ------------ | ---------- |
+| Base         | 基本图标库 |
+| Guangfa      | 广发图标库 |
+| KingAutometa | 新RPA      |
 
 ## 别名图标
 
@@ -95,14 +98,14 @@ import { IconName } from 'ksw-vue-icon/Guangfa'
 
 ```json
 {
-  "alias": [
-    "alias-1",
-    "alias-2",
-    "alias-3"
-  ],
+  "alias": ["alias-1", "alias-2", "alias-3"]
 }
 ```
 
+## 支持 VUE 组件
+
+支持使用 `vue` 组件制作复杂的`动画图标`、`插画`等设计资产, 请将组件放置于 `src/components` 中，同样支持配置 `icons-config.json`
+
 ## 展示页配置
 
 ### 安装依赖

package/es/assets/ai-scan-color-animation.css

@@ -0,0 +1 @@
+svg #scan-light[data-v-ddfe148d]{mix-blend-mode:lighten;filter:blur(.25px) brightness(2)}

package/es/assets/icon.css

@@ -0,0 +1 @@
+.ksw-icon{display:inline-block;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ksw-icon svg{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ksw-icon-spin svg{animation:ksw-icon-spin 1s infinite linear}.ksw-icon-grayscale{filter:grayscale(1);opacity:.8}.ksw-icon-rtl{transform:scaleX(-1)}@keyframes ksw-icon-spin{to{transform:rotate(360deg)}}

package/es/components/animation/ai-scan-color-animation.js

@@ -0,0 +1,123 @@
+import { ref as i, onMounted as v, openBlock as n, createElementBlock as p, createElementVNode as t, createStaticVNode as h, pushScopeId as _, popScopeId as F } from "vue";
+import { g as c } from "../../gsap.js";
+import '../../assets/icon.css';import '../../assets/ai-scan-color-animation.css';/* empty css         */
+const g = (e, s) => {
+  const a = e.__vccOpts || e;
+  for (const [f, d] of s)
+    a[f] = d;
+  return a;
+}, o = (e) => (_("data-v-ddfe148d"), e = e(), F(), e), q = { class: "ksw-icon" }, B = ["width", "height"], m = /* @__PURE__ */ h('<defs data-v-ddfe148d><clipPath id="0558af64_a" data-v-ddfe148d><rect width="24" height="24" rx="0" data-v-ddfe148d></rect></clipPath><linearGradient x2=".939" y2="1.054" id="0558af64_b" data-v-ddfe148d><stop offset="0%" stop-color="#2882FF" data-v-ddfe148d></stop><stop offset="31.429%" stop-color="#5B65F5" data-v-ddfe148d></stop><stop offset="100%" stop-color="#B700FF" data-v-ddfe148d></stop></linearGradient><linearGradient x2="1.187" y2=".668" id="0558af64_c" data-v-ddfe148d><stop offset="0%" stop-color="#2882FF" data-v-ddfe148d></stop><stop offset="31.429%" stop-color="#5B65F5" data-v-ddfe148d></stop><stop offset="100%" stop-color="#B700FF" data-v-ddfe148d></stop></linearGradient><linearGradient x2="1.187" y2=".668" id="0558af64_d" data-v-ddfe148d><stop offset="0%" stop-color="#2882FF" data-v-ddfe148d></stop><stop offset="31.429%" stop-color="#5B65F5" data-v-ddfe148d></stop><stop offset="100%" stop-color="#B700FF" data-v-ddfe148d></stop></linearGradient><linearGradient x2="1.187" y2=".668" id="0558af64_e" data-v-ddfe148d><stop offset="0%" stop-color="#2882FF" data-v-ddfe148d></stop><stop offset="31.429%" stop-color="#5B65F5" data-v-ddfe148d></stop><stop offset="100%" stop-color="#B700FF" data-v-ddfe148d></stop></linearGradient><linearGradient x2="1.187" y2=".668" id="0558af64_f" data-v-ddfe148d><stop offset="0%" stop-color="#2882FF" data-v-ddfe148d></stop><stop offset="31.429%" stop-color="#5B65F5" data-v-ddfe148d></stop><stop offset="100%" stop-color="#B700FF" data-v-ddfe148d></stop></linearGradient><filter id="0558af64_g" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-.1" y="-.2" width="1.2" height="1.4" data-v-ddfe148d><feFlood flood-opacity="0" result="BackgroundImageFix" data-v-ddfe148d></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" data-v-ddfe148d></feBlend><feGaussianBlur stdDeviation=".5" result="effect1_foregroundBlur" data-v-ddfe148d></feGaussianBlur></filter><linearGradient x1=".5" x2=".5" y2="1" id="0558af64_h" data-v-ddfe148d><stop offset="0%" stop-color="#A612FD" stop-opacity="0" data-v-ddfe148d></stop><stop offset="100%" stop-color="#5B65F5" stop-opacity=".5" data-v-ddfe148d></stop></linearGradient><filter id="0558af64_i" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-.05" y="-.1" width="1.1" height="1.2" data-v-ddfe148d><feFlood flood-opacity="0" result="BackgroundImageFix" data-v-ddfe148d></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" data-v-ddfe148d></feBlend><feGaussianBlur stdDeviation=".25" result="effect1_foregroundBlur" data-v-ddfe148d></feGaussianBlur></filter><linearGradient x1=".5" x2=".5" y2="1" id="0558af64_j" data-v-ddfe148d><stop offset="0%" stop-color="#A612FD" stop-opacity="0" data-v-ddfe148d></stop><stop offset="91.429%" stop-color="#F200FF" stop-opacity="0" data-v-ddfe148d></stop><stop offset="100%" stop-color="#69C0FF" data-v-ddfe148d></stop></linearGradient></defs>', 1), x = { "clip-path": "url(#0558af64_a)" }, y = /* @__PURE__ */ o(() => /* @__PURE__ */ t("path", {
+  d: "M16.209 6v12q0 .074.014.146.015.073.043.14.028.07.07.13.04.062.092.114.053.052.114.093.061.041.13.07.068.028.14.042.073.015.147.015t.146-.015q.072-.014.14-.042.069-.029.13-.07.062-.04.114-.093.052-.052.093-.114.041-.06.07-.13.028-.067.042-.14.015-.072.015-.146V6q0-.074-.015-.146-.014-.073-.042-.141-.029-.068-.07-.13-.04-.061-.093-.113-.052-.053-.114-.094-.061-.04-.13-.069-.068-.028-.14-.043-.072-.014-.146-.014t-.147.014q-.072.015-.14.043-.069.028-.13.07-.061.04-.114.093-.052.052-.093.113-.04.062-.07.13-.027.068-.042.14-.014.073-.014.147zm-4.322 7.125L10.02 7.628l-1.866 5.497h3.732zm.509 1.5l1.227 3.615v.001q.02.055.046.107.028.052.062.099.035.047.077.088.041.04.089.075.047.034.1.06.052.026.107.044.056.018.114.027.057.009.116.009.074 0 .146-.014.072-.015.14-.043.069-.028.13-.07.062-.04.114-.093.052-.052.093-.113.041-.062.07-.13.028-.068.042-.14.015-.073.015-.147 0-.124-.04-.241l-4.073-12q-.02-.055-.046-.107-.027-.052-.062-.099-.035-.047-.077-.088-.041-.04-.089-.075-.047-.034-.1-.06-.052-.026-.107-.044-.056-.018-.114-.027-.057-.009-.116-.009h-.479q-.058 0-.116.01-.058.008-.113.026-.056.018-.108.044t-.1.06q-.047.034-.089.075-.041.041-.076.088-.035.047-.062.099-.027.052-.046.107l-4.072 12q-.04.117-.04.241 0 .074.014.146.015.073.043.141.028.068.07.13.04.061.092.113.053.052.114.094.062.04.13.069.068.028.14.043.073.014.147.014.058 0 .116-.01.058-.008.113-.026.056-.018.108-.044t.1-.06q.047-.034.089-.075.041-.041.076-.088.035-.047.062-.099.027-.052.046-.107l1.227-3.616h4.75z",
+  "fill-rule": "evenodd",
+  fill: "url(#0558af64_b)"
+}, null, -1)), G = /* @__PURE__ */ o(() => /* @__PURE__ */ t("path", {
+  id: "scan-bg",
+  d: "M2 2h20v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z",
+  fill: "url(#0558af64_h)",
+  filter: "url(#0558af64_g)"
+}, null, -1)), w = /* @__PURE__ */ o(() => /* @__PURE__ */ t("path", {
+  id: "scan-light",
+  d: "M2 2h20v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z",
+  fill: "url(#0558af64_j)",
+  filter: "url(#0558af64_i)"
+}, null, -1)), k = /* @__PURE__ */ o(() => /* @__PURE__ */ t("use", { href: "#scan-light" }, null, -1)), z = /* @__PURE__ */ o(() => /* @__PURE__ */ t("use", { href: "#scan-light" }, null, -1)), S = [
+  G,
+  w,
+  k,
+  z
+], A = /* @__PURE__ */ o(() => /* @__PURE__ */ t("g", null, [
+  /* @__PURE__ */ t("path", {
+    d: "M4.5 2.75H7q.074 0 .146-.014.073-.015.141-.043.068-.028.13-.07.061-.04.113-.093.053-.052.094-.113.04-.062.069-.13.028-.068.043-.14.014-.073.014-.147t-.014-.146q-.015-.073-.043-.141-.028-.068-.07-.13-.04-.061-.093-.113-.052-.053-.113-.094-.062-.04-.13-.069-.068-.028-.14-.043Q7.073 1.25 7 1.25H4.5q-1.346 0-2.298.952T1.25 4.5v1.25q0 .074.014.146.015.073.043.141.028.068.07.13.04.061.093.113.052.053.113.094.062.04.13.069.068.028.14.043.073.014.147.014t.146-.014q.073-.015.141-.043.068-.028.13-.07.061-.04.113-.093.053-.052.094-.113.04-.062.069-.13.028-.068.043-.14.014-.073.014-.147V4.5q0-.725.513-1.237.512-.513 1.237-.513z",
+    "fill-rule": "evenodd",
+    fill: "url(#0558af64_c)"
+  }),
+  /* @__PURE__ */ t("path", {
+    d: "M1.25 18.25q0-.074.014-.146.015-.073.043-.141.028-.068.07-.13.04-.061.093-.113.052-.053.113-.094.062-.04.13-.069.068-.028.14-.043.073-.014.147-.014t.146.014q.073.015.141.043.068.028.13.07.061.04.113.093.053.052.094.113.04.062.069.13.028.068.043.14.014.073.014.147v1.25q0 .725.513 1.237.512.513 1.237.513H7q.074 0 .146.014.073.015.141.043.068.028.13.07.061.04.113.093.053.052.094.113.04.062.069.13.028.068.043.14.014.073.014.147t-.014.146q-.015.073-.043.141-.028.068-.07.13-.04.061-.093.113-.052.053-.113.094-.062.04-.13.069-.068.028-.14.043-.073.014-.147.014H4.5q-1.346 0-2.298-.952T1.25 19.5v-1.25z",
+    "fill-rule": "evenodd",
+    fill: "url(#0558af64_d)"
+  }),
+  /* @__PURE__ */ t("path", {
+    d: "M17 1.25h2.5q1.346 0 2.298.952T22.75 4.5v1.25q0 .074-.014.146-.015.073-.043.141-.028.068-.07.13-.04.061-.093.113-.052.053-.113.094-.062.04-.13.069-.068.028-.14.043-.073.014-.147.014t-.146-.014q-.073-.015-.141-.043-.068-.028-.13-.07-.061-.04-.113-.093-.053-.052-.094-.113-.04-.062-.069-.13-.028-.068-.043-.14-.014-.073-.014-.147V4.5q0-.725-.513-1.237-.512-.513-1.237-.513H17q-.074 0-.146-.014-.073-.015-.141-.043-.068-.028-.13-.07-.061-.04-.113-.093-.053-.052-.094-.113-.04-.062-.069-.13-.028-.068-.043-.14-.014-.073-.014-.147t.014-.146q.015-.073.043-.141.028-.068.07-.13.04-.061.093-.113.052-.053.113-.094.062-.04.13-.069.068-.028.14-.043.073-.014.147-.014z",
+    "fill-rule": "evenodd",
+    fill: "url(#0558af64_e)"
+  }),
+  /* @__PURE__ */ t("path", {
+    d: "M21.25 18.25q0-.074.014-.146.015-.073.043-.141.028-.068.07-.13.04-.061.093-.113.052-.053.113-.094.062-.04.13-.069.068-.028.14-.043.073-.014.147-.014t.146.014q.073.015.141.043.068.028.13.07.061.04.113.093.053.052.094.113.04.062.069.13.028.068.043.14.014.073.014.147v1.25q0 1.346-.952 2.298t-2.298.952H17q-.074 0-.146-.014-.073-.015-.141-.043-.068-.028-.13-.07-.061-.04-.113-.093-.053-.052-.094-.113-.04-.062-.069-.13-.028-.068-.043-.14-.014-.073-.014-.147t.014-.146q.015-.073.043-.141.028-.068.07-.13.04-.061.093-.113.052-.053.113-.094.062-.04.13-.069.068-.028.14-.043.073-.014.147-.014h2.5q.725 0 1.237-.513.513-.512.513-1.237v-1.25z",
+    "fill-rule": "evenodd",
+    fill: "url(#0558af64_f)"
+  })
+], -1)), H = {
+  __name: "ai-scan-color-animation",
+  props: {
+    size: {
+      type: [String, Number],
+      default: "1em"
+    }
+  },
+  setup(e) {
+    const s = i(null), a = i(null);
+    i(!1);
+    const f = e;
+    return v(() => {
+      let d = !1;
+      const l = c.timeline({
+        repeat: -1,
+        repeatDelay: 0,
+        paused: !0,
+        onRepeat() {
+          d || this.pause();
+        }
+      }), u = c.fromTo(
+        a.value,
+        {
+          yPercent: -120,
+          autoAlpha: 0
+          // 初始透明度 0
+        },
+        {
+          yPercent: 120,
+          duration: 1.5,
+          ease: "power2.inOut",
+          keyframes: {
+            "0%": { autoAlpha: 0 },
+            "35%": { autoAlpha: 1 },
+            "75%": { autoAlpha: 1 },
+            "100%": { autoAlpha: 0 }
+          }
+        }
+      );
+      l.add(u, 0);
+      const r = s.value;
+      r.addEventListener("mouseenter", () => {
+        d = !0, l.play();
+      }), r.addEventListener("mouseleave", () => {
+        d = !1;
+      });
+    }), (d, l) => (n(), p("span", q, [
+      (n(), p("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+        fill: "none",
+        version: "1.1",
+        width: f.size,
+        height: f.size,
+        viewBox: "0 0 24 24",
+        ref_key: "svgRef",
+        ref: s
+      }, [
+        m,
+        t("g", x, [
+          y,
+          t("g", {
+            ref_key: "scan",
+            ref: a
+          }, S, 512),
+          A
+        ])
+      ], 8, B))
+    ]));
+  }
+}, D = /* @__PURE__ */ g(H, [["__scopeId", "data-v-ddfe148d"]]);
+export {
+  D as default
+};

package/es/components/animation/ai-scan-color-animation.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    size: string | number;
+    $props: {
+        readonly size?: string | number;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/es/components/animation/index.d.ts

@@ -0,0 +1 @@
+export { default as IconAiScanColorAnimation } from './ai-scan-color-animation.vue';

package/es/components/animation/index.js

@@ -0,0 +1,4 @@
+import { default as n } from "./ai-scan-color-animation.js";
+export {
+  n as IconAiScanColorAnimation
+};