ksw-vue-icon 1.0.8 → 2.0.0

package/README.md

@@ -1,88 +1,29 @@
-# ksw-vue-icon
+# my-vue3-app
 
-## 介绍
+This template should help get you started developing with Vue 3 in Vite.
 
-图标自动化是一个可以帮助你将 SVG 转换为 VUE 组件代码，并上传至 NPM 以便开发直接使用命令行安装和更新。设计师可以通过此插件快速交付图标文件，它能省去很多不必要的中间环节，从而达到让设计师轻轻一点就更新，开发一条命令就下载的效果，整个过程中两人都不用离开座位多说一句话。
+## Recommended IDE Setup
 
-### NPM包
-请访问 https://www.npmjs.com/package/ksw-vue-icon
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 
-### ICON 展示页面
+## Customize configuration
 
-请访问 [KSW-vue-icon](https://sengoku-f.github.io/KSW-vue-icon/)
+See [Vite Configuration Reference](https://vitejs.dev/config/).
 
-- 复制Vue图标组件
-- 查看ICON
-
-## 入门
-
-### 安装 NPM 包
-
-```
-npm install ksw-vue-icon --save
-yarn add ksw-vue-icon
-```
-
-### 引用
+## Project Setup
 
-```
-import { IconHome } from 'ksw-vue-icon'
+```sh
+npm install
 ```
 
-### 用法
+### Compile and Hot-Reload for Development
 
-```
-<IconImage :size="36" color="#009C22" />
+```sh
+npm run dev
 ```
 
-## 展示页配置
+### Compile and Minify for Production
 
-### 安装依赖
-```
-# 对于高版本的 node
-yarn config set "strict-ssl" false
-yarn install
-```
-
-### 编译和热重新加载用于开发
-```
-export NODE_OPTIONS=--openssl-legacy-provider
-yarn serve
-```
-
-### 编译和缩小以供生产
-```
-yarn build
+```sh
+npm run build
 ```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-## 部署方法
-
-1. 将 `svg` 图标放入 `src/svg` 文件夹中
-
-2. 更改 `package.json` 中的 `version`
-
-3. 推送到 `github` 仓库
-
-## 图标规范
-
-确保图标基础尺寸是 `24×24`
-
-如果是彩色图标可以在命名中包含 `color` 例如 `social-color`
-
-图标命名请使用英文（不可以含 `/`）和 `-`，例如 `dewu-logo-original`
-
-图标一般有描边 `stroke` 和填充 `fill` 两种样式，一个图标只能采用一种形式，不可以混合，默认 `fill`。想要转为 `fill` 样式，你可以使用 `Outline Stroke（Shift+Command+O）` 将图标转换为填充形状。
-
-通过图标命名我们对 `svg` 处理成单色（去掉原始颜色设置 `fill="currentColor"`）、彩色（保留原始颜色）。
-
-## 属性
-|    属性名称	 | 介绍  | 类型  | 默认值 | 注释 |
-| ---------- | --- | --- | --- | --- |
-| size | 图标的大小，宽高相同 | number &#124; string |  '1em' |
-| spin |  给图标加旋转效果 | boolean | false |
-| color |  图标的颜色，默认为当前颜色 | string &#124; string[]|  'currentColor' |

package/package.json

@@ -1,62 +1,34 @@
 {
   "name": "ksw-vue-icon",
-  "version": "1.0.8",
+  "version": "2.0.0",
   "description": "Vue Icon",
-  "main": "bundle/index.common.js",
+  "type": "commonjs",
+  "main": "packages/index.es.js",
   "files": [
-    "es",
     "styles"
   ],
   "repository": "https://github.com/sengoku-f/KSW-vue-icon",
   "scripts": {
     "generate": "sudo rm -rf src/icons && node bin/build.js",
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build-bundle": "vue-cli-service build --dest bundle --target lib --name index ./src/index.js",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "build-packages": "BUILD=packages vite build",
+    "preview": "vite preview",
+    "lint": "vite lint"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
-    "normalize.css": "^8.0.1",
-    "vue": "^2.6.11",
-    "vue-m-message": "^3.0.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "babel-eslint": "^10.1.0",
-    "cheerio": "^1.0.0-rc.3",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "figma-js": "^1.10.1",
-    "got": "^11.3.0",
-    "p-queue": "5.0.0",
-    "svgo": "^1.3.0",
+    "cheerio": "^1.0.0-rc.12",
+    "svgo": "^3.2.0",
     "uppercamelcase": "^3.0.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue": "^3.4.21",
+    "vue-m-message": "^4.0.2"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "vite": "^5.2.8"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
   "config": {
     "framework": "vue",
     "style": "fill"
   }
-}
+}

package/packages/index.es.js

@@ -0,0 +1,177 @@
+import { openBlock as s, createElementBlock as i, normalizeClass as c, mergeProps as l, toHandlers as h, createStaticVNode as d } from "vue";
+const Q = (e, o) => {
+  const t = e.__vccOpts || e;
+  for (const [a, n] of o)
+    t[a] = n;
+  return t;
+}, _ = {
+  name: "IconAdd",
+  props: {
+    size: {
+      type: [Number, String],
+      default: "1em"
+    },
+    color: {
+      type: String,
+      default: "currentColor"
+    },
+    spin: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    iconClasses() {
+      return [
+        "ksw-icon",
+        "ksw-icon-" + this.$options.name.toLowerCase(),
+        { "ksw-icon-spin": this.spin }
+      ];
+    }
+  }
+}, g = ["width", "height", "fill"], p = /* @__PURE__ */ d('<defs><clipPath id="master_svg0_234_18041"><rect x="0" y="0" width="24" height="24" rx="0"></rect></clipPath><clipPath id="master_svg1_3105_3539"><rect x="0" y="0" width="24" height="24" rx="0"></rect></clipPath></defs><g clip-path="url(#master_svg0_234_18041)"><g clip-path="url(#master_svg1_3105_3539)"></g><g transform="matrix(0,1,-1,0,16,-10)"><path d="M29.875,3L14.125,3C13.50368,3,13,3.447715,13,4C13,4.55228,13.50368,5,14.125,5L29.875,5C30.4963,5,31,4.55228,31,4C31,3.447715,30.4963,3,29.875,3Z" fill-rule="evenodd" fill-opacity="1"></path></g><g><path d="M19.875,11L4.125,11C3.50368,11,3,11.447715,3,12C3,12.55228,3.50368,13,4.125,13L19.875,13C20.4963,13,21,12.55228,21,12C21,11.447715,20.4963,11,19.875,11Z" fill-rule="evenodd" fill-opacity="1"></path></g></g>', 2), f = [
+  p
+];
+function u(e, o, t, a, n, r) {
+  return s(), i("span", {
+    class: c(r.iconClasses)
+  }, [
+    (s(), i("svg", l({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true"
+    }, h(e.$listeners, !0), { fill: t.color }), f, 16, g))
+  ], 2);
+}
+const N = /* @__PURE__ */ Q(_, [["render", u]]), w = {
+  name: "IconArrowBottom",
+  props: {
+    size: {
+      type: [Number, String],
+      default: "1em"
+    },
+    color: {
+      type: String,
+      default: "currentColor"
+    },
+    spin: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    iconClasses() {
+      return [
+        "ksw-icon",
+        "ksw-icon-" + this.$options.name.toLowerCase(),
+        { "ksw-icon-spin": this.spin }
+      ];
+    }
+  }
+}, m = ["width", "height", "fill"], v = /* @__PURE__ */ d('<defs><clipPath id="master_svg0_234_6201"><rect x="0" y="0" width="24" height="24" rx="0"></rect></clipPath><clipPath id="master_svg1_3105_3982"><rect x="0" y="0" width="24" height="24" rx="0"></rect></clipPath></defs><g clip-path="url(#master_svg0_234_6201)"><g clip-path="url(#master_svg1_3105_3982)"></g><g><g><g><path d="M3.498273,8.439443L12,15.99653L20.501,8.440077L20.5017,8.439443Q20.6047,8.347917,20.7335,8.298959Q20.8622,8.25,21,8.25Q21.0739,8.25,21.1463,8.264410999999999Q21.2188,8.278822,21.287,8.30709Q21.3553,8.335359,21.4167,8.376398Q21.4781,8.417437,21.5303,8.46967Q21.5826,8.521903,21.6236,8.583322Q21.6646,8.644742,21.6929,8.712987Q21.7212,8.781233,21.7356,8.853682Q21.75,8.9261315,21.75,9Q21.75,9.160671,21.6842,9.307242Q21.6184,9.453813,21.4983,9.560557L21.4976,9.56119L12.49827,17.560560000000002Q12.44722,17.60594,12.3888,17.64135Q12.33039,17.676769999999998,12.26654,17.70104Q12.20269,17.72532,12.1355,17.737659999999998Q12.06831,17.75,12,17.75Q11.93169,17.75,11.8645,17.737659999999998Q11.79732,17.72532,11.73347,17.70104Q11.66961,17.676769999999998,11.6112,17.64135Q11.55278,17.60594,11.50173,17.560560000000002L2.501727,9.560557Q2.38164,9.453813,2.31582,9.307242Q2.25,9.160671,2.25,9Q2.25,8.9261315,2.264411,8.853682Q2.278822,8.781233,2.30709,8.712987Q2.335359,8.644742,2.376398,8.583322Q2.417437,8.521903,2.46967,8.46967Q2.521903,8.417437,2.583322,8.376398Q2.644742,8.335359,2.712987,8.30709Q2.781233,8.278822,2.853682,8.264410999999999Q2.9261315,8.25,3,8.25Q3.1377639999999998,8.25,3.266535,8.298959Q3.395307,8.347917,3.498273,8.439443Z" fill-rule="evenodd" fill-opacity="1"></path></g></g></g></g>', 2), x = [
+  v
+];
+function L(e, o, t, a, n, r) {
+  return s(), i("span", {
+    class: c(r.iconClasses)
+  }, [
+    (s(), i("svg", l({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true"
+    }, h(e.$listeners, !0), { fill: t.color }), x, 16, m))
+  ], 2);
+}
+const Z = /* @__PURE__ */ Q(w, [["render", L]]), y = {
+  name: "IconArrowLeft",
+  props: {
+    size: {
+      type: [Number, String],
+      default: "1em"
+    },
+    color: {
+      type: String,
+      default: "currentColor"
+    },
+    spin: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    iconClasses() {
+      return [
+        "ksw-icon",
+        "ksw-icon-" + this.$options.name.toLowerCase(),
+        { "ksw-icon-spin": this.spin }
+      ];
+    }
+  }
+}, C = ["width", "height", "fill"], $ = /* @__PURE__ */ d('<defs><clipPath id="master_svg0_3069_6492"><rect x="0" y="0" width="24" height="24" rx="0"></rect></clipPath><clipPath id="master_svg1_3105_3981"><rect x="0" y="0" width="24" height="24" rx="0"></rect></clipPath></defs><g clip-path="url(#master_svg0_3069_6492)"><g clip-path="url(#master_svg1_3105_3981)"></g><g transform="matrix(0,1,-1,0,19.00006103515625,-13.00006103515625)"><g><g><path d="M16.49833403515625,2.439443L25.00006103515625,9.99653L33.501061035156255,2.440077L33.50176103515625,2.439443Q33.60476103515625,2.347917,33.73356103515625,2.298959Q33.86226103515625,2.25,34.00006103515625,2.25Q34.073961035156245,2.25,34.14636103515625,2.264411Q34.21886103515625,2.278822,34.28706103515625,2.30709Q34.35536103515625,2.335359,34.41676103515625,2.376398Q34.47816103515625,2.417437,34.53036103515625,2.46967Q34.58266103515625,2.521903,34.623661035156246,2.583322Q34.66466103515625,2.644742,34.69296103515625,2.712987Q34.721261035156246,2.781233,34.735661035156255,2.853682Q34.75006103515625,2.9261315,34.75006103515625,3Q34.75006103515625,3.160671,34.684261035156254,3.307242Q34.61846103515625,3.4538130000000002,34.49836103515625,3.560557L34.49766103515625,3.56119L25.498331035156248,11.56056Q25.44728103515625,11.60594,25.38886103515625,11.64135Q25.33045103515625,11.67677,25.26660103515625,11.70104Q25.20275103515625,11.72532,25.13556103515625,11.73766Q25.06837103515625,11.75,25.00006103515625,11.75Q24.93175103515625,11.75,24.86456103515625,11.73766Q24.79738103515625,11.72532,24.73353103515625,11.70104Q24.66967103515625,11.67677,24.61126103515625,11.64135Q24.55284103515625,11.60594,24.501791035156252,11.56056L15.50178803515625,3.560557Q15.38170103515625,3.4538130000000002,15.31588103515625,3.307242Q15.25006103515625,3.160671,15.25006103515625,3Q15.25006103515625,2.9261315,15.264472035156249,2.853682Q15.27888303515625,2.781233,15.30715103515625,2.712987Q15.33542003515625,2.644742,15.37645903515625,2.583322Q15.41749803515625,2.521903,15.46973103515625,2.46967Q15.52196403515625,2.417437,15.58338303515625,2.376398Q15.64480303515625,2.335359,15.71304803515625,2.30709Q15.78129403515625,2.278822,15.85374303515625,2.264411Q15.92619253515625,2.25,16.00006103515625,2.25Q16.13782503515625,2.25,16.26659603515625,2.298959Q16.39536803515625,2.347917,16.49833403515625,2.439443Z" fill-rule="evenodd" fill-opacity="1"></path></g></g></g></g>', 2), P = [
+  $
+];
+function k(e, o, t, a, n, r) {
+  return s(), i("span", {
+    class: c(r.iconClasses)
+  }, [
+    (s(), i("svg", l({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true"
+    }, h(e.$listeners, !0), { fill: t.color }), P, 16, C))
+  ], 2);
+}
+const b = /* @__PURE__ */ Q(y, [["render", k]]), z = {
+  name: "IconArrowTop",
+  props: {
+    size: {
+      type: [Number, String],
+      default: "1em"
+    },
+    color: {
+      type: String,
+      default: "currentColor"
+    },
+    spin: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    iconClasses() {
+      return [
+        "ksw-icon",
+        "ksw-icon-" + this.$options.name.toLowerCase(),
+        { "ksw-icon-spin": this.spin }
+      ];
+    }
+  }
+}, B = ["width", "height", "fill"], S = /* @__PURE__ */ d('<defs><clipPath id="master_svg0_450_84047"><rect x="0" y="0" width="24" height="24" rx="0"></rect></clipPath><clipPath id="master_svg1_3105_3980"><rect x="0" y="0" width="24" height="24" rx="0"></rect></clipPath></defs><g clip-path="url(#master_svg0_450_84047)"><g clip-path="url(#master_svg1_3105_3980)"></g><g transform="matrix(-1,0,0,-1,42,32)"><g><g><path d="M21.498273,15.439443L30,22.99653L38.501000000000005,15.440077L38.5017,15.439443Q38.6047,15.347917,38.7335,15.298959Q38.8622,15.25,39,15.25Q39.073899999999995,15.25,39.1463,15.264410999999999Q39.2188,15.278822,39.287,15.30709Q39.3553,15.335359,39.4167,15.376398Q39.4781,15.417437,39.5303,15.46967Q39.5826,15.521903,39.623599999999996,15.583322Q39.6646,15.644742,39.6929,15.712987Q39.721199999999996,15.781233,39.735600000000005,15.853682Q39.75,15.9261315,39.75,16Q39.75,16.160671,39.684200000000004,16.307242Q39.6184,16.453813,39.4983,16.560557L39.4976,16.56119L30.498269999999998,24.560560000000002Q30.44722,24.60594,30.3888,24.64135Q30.33039,24.676769999999998,30.26654,24.70104Q30.20269,24.72532,30.1355,24.737659999999998Q30.06831,24.75,30,24.75Q29.93169,24.75,29.8645,24.737659999999998Q29.79732,24.72532,29.73347,24.70104Q29.66961,24.676769999999998,29.6112,24.64135Q29.55278,24.60594,29.501730000000002,24.560560000000002L20.501727,16.560557Q20.38164,16.453813,20.31582,16.307242Q20.25,16.160671,20.25,16Q20.25,15.9261315,20.264411,15.853682Q20.278822,15.781233,20.30709,15.712987Q20.335359,15.644742,20.376398000000002,15.583322Q20.417437,15.521903,20.46967,15.46967Q20.521903000000002,15.417437,20.583322,15.376398Q20.644742,15.335359,20.712987,15.30709Q20.781233,15.278822,20.853682,15.264410999999999Q20.9261315,15.25,21,15.25Q21.137764,15.25,21.266535,15.298959Q21.395307,15.347917,21.498273,15.439443Z" fill-rule="evenodd" fill-opacity="1"></path></g></g></g></g>', 2), A = [
+  S
+];
+function I(e, o, t, a, n, r) {
+  return s(), i("span", {
+    class: c(r.iconClasses)
+  }, [
+    (s(), i("svg", l({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true"
+    }, h(e.$listeners, !0), { fill: t.color }), A, 16, B))
+  ], 2);
+}
+const T = /* @__PURE__ */ Q(z, [["render", I]]);
+export {
+  N as IconAdd,
+  Z as IconArrowBottom,
+  b as IconArrowLeft,
+  T as IconArrowTop
+};