From 2fe4229a5f1d5c43fbbee7fcdbd0855532f50b95 Mon Sep 17 00:00:00 2001
From: CyanSalt <c.salt@hotmail.com>
Date: Fri, 7 Jul 2023 14:04:17 +0800
Subject: [PATCH] feat: add icon

---
 docs/.vitepress/config.ts |   1 +
 docs/components/icon.md   | 129 ++++++++++++++++++++++++++++++++++
 package-lock.json         |  50 +++++++++++++
 package.json              |   1 +
 src/components.ts         |   1 +
 src/icon/index.vue        | 143 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 325 insertions(+)
 create mode 100644 docs/components/icon.md
 create mode 100644 src/icon/index.vue

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 47c6552..33e3ccd 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -32,6 +32,7 @@ export default defineConfig({
               { text: 'Divider', link: '/components/divider' },
               { text: 'Graphics', link: '/components/graphics' },
               { text: 'Grid Guide', link: '/components/grid-guide' },
+              { text: 'Icon', link: '/components/icon' },
               { text: 'Link', link: '/components/link' },
               { text: 'Space', link: '/components/space' },
               { text: 'Text', link: '/components/text' },
diff --git a/docs/components/icon.md b/docs/components/icon.md
new file mode 100644
index 0000000..ebf0816
--- /dev/null
+++ b/docs/components/icon.md
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { RAlert, RDetails, RIcon, RSpace, RTable, RText } from 'roughness'
+</script>
+
+# RIcon
+
+No Picture, No Truth.
+
+<RAlert type="info">
+
+INFO<br>Roughness uses [Feather Icons](https://feathericons.com/).
+
+</RAlert>
+
+## Example
+
+### Basic
+
+<RDetails>
+  <template #summary>Show Code</template>
+
+```vue
+<script lang="ts" setup>
+import { RIcon, RSpace } from 'roughness'
+</script>
+
+<template>
+  <RSpace>
+    <RIcon name="minus" />
+    <RIcon name="maximize-2" />
+    <RIcon name="x" />
+  </RSpace>
+</template>
+```
+
+</RDetails>
+
+<RSpace>
+  <RIcon name="minus" />
+  <RIcon name="maximize-2" />
+  <RIcon name="x" />
+</RSpace>
+
+### Color and Size
+
+See [Text](/components/text).
+
+## Usage
+
+### Props
+
+<RSpace overflow>
+<RTable
+  :columns="['name', 'type', 'default', 'description']"
+  :rows="['name', 'reactions', '...']"
+>
+  <template #body:*.name="{ row }">{{ row }}</template>
+
+  <template #body:name.type>
+
+  `string`
+
+  </template>
+  <template #body:name.default>
+    <RText type="error">Required</RText>
+  </template>
+  <template #body:name.description>
+
+  Name of the icon in [Feather Icons](https://feathericons.com/).
+
+  </template>
+
+  <template #body:reactions.type>
+
+  `string[]`
+
+  </template>
+  <template #body:reactions.default>
+
+  `[]`
+
+  </template>
+  <template #body:reactions.description>
+
+  States that trigger graphics redrawing.
+
+  See [Reactions](/guide/theme#reactions).
+
+  </template>
+
+  <template #body:....description>
+
+  See [Text Props](/components/text#props).
+
+  </template>
+</RTable>
+</RSpace>
+
+### Styles
+
+<RSpace overflow>
+<RTable
+  :columns="['name', 'values', 'default', 'description']"
+  :rows="['color', '...']"
+>
+  <template #body:*.name="{ row }">--r-icon-{{ row }}</template>
+
+  <template #body:color.values>
+
+  `<color>`
+
+  </template>
+  <template #body:color.default>
+
+  `var(--r-common-text-color)` for `default` `type`, other theme colors for other `type`
+
+  </template>
+  <template #body:color.description>
+    Color of the icon.
+  </template>
+
+  <template #body:....name>...</template>
+  <template #body:....description>
+
+  See [Text Styles](/components/text#styles).
+
+  </template>
+</RTable>
+</RSpace>
diff --git a/package-lock.json b/package-lock.json
index f249501..c4ce93f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "chart.js": "^4.3.0",
         "chartjs-plugin-roughness": "^1.0.6",
         "fast-glob": "^3.2.12",
+        "feather-icons": "^4.29.0",
         "lodash-es": "^4.17.21",
         "parse-unit": "^1.0.1",
         "release-it": "^15.11.0",
@@ -3691,6 +3692,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "dev": true
+    },
     "node_modules/clean-regexp": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/clean-regexp/-/clean-regexp-1.0.0.tgz",
@@ -4655,6 +4662,17 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/core-js": {
+      "version": "3.31.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.31.1.tgz",
+      "integrity": "sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -6277,6 +6295,16 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/feather-icons": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.0.tgz",
+      "integrity": "sha512-Y7VqN9FYb8KdaSF0qD1081HCkm0v4Eq/fpfQYQnubpqi0hXx14k+gF9iqtRys1SIcTEi97xDi/fmsPFZ8xo0GQ==",
+      "dev": true,
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "core-js": "^3.1.3"
+      }
+    },
     "node_modules/fetch-blob": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
@@ -15253,6 +15281,12 @@
       "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
       "dev": true
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "dev": true
+    },
     "clean-regexp": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/clean-regexp/-/clean-regexp-1.0.0.tgz",
@@ -16002,6 +16036,12 @@
       "dev": true,
       "peer": true
     },
+    "core-js": {
+      "version": "3.31.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.31.1.tgz",
+      "integrity": "sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==",
+      "dev": true
+    },
     "core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -17183,6 +17223,16 @@
         "reusify": "^1.0.4"
       }
     },
+    "feather-icons": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.0.tgz",
+      "integrity": "sha512-Y7VqN9FYb8KdaSF0qD1081HCkm0v4Eq/fpfQYQnubpqi0hXx14k+gF9iqtRys1SIcTEi97xDi/fmsPFZ8xo0GQ==",
+      "dev": true,
+      "requires": {
+        "classnames": "^2.2.5",
+        "core-js": "^3.1.3"
+      }
+    },
     "fetch-blob": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
diff --git a/package.json b/package.json
index 6fbf66a..36230b1 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "chart.js": "^4.3.0",
     "chartjs-plugin-roughness": "^1.0.6",
     "fast-glob": "^3.2.12",
+    "feather-icons": "^4.29.0",
     "lodash-es": "^4.17.21",
     "parse-unit": "^1.0.1",
     "release-it": "^15.11.0",
diff --git a/src/components.ts b/src/components.ts
index f19f130..74f8bb1 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -7,6 +7,7 @@ export { default as RDivider } from './divider/index.vue'
 export { default as RGraphics } from './graphics/index.vue'
 export { default as RGraphicsConfig } from './graphics/graphics-config.vue'
 export { default as RGridGuide } from './grid-guide/index.vue'
+export { default as RIcon } from './icon/index.vue'
 export { default as RInput } from './input/index.vue'
 export { default as RRate } from './rate/index.vue'
 export { default as RSelect } from './select/index.vue'
diff --git a/src/icon/index.vue b/src/icon/index.vue
new file mode 100644
index 0000000..87d8033
--- /dev/null
+++ b/src/icon/index.vue
@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import icons from 'feather-icons/dist/icons.json'
+import { chunk } from 'lodash-es'
+import type { Options } from 'roughjs/bin/core'
+import type { Point } from 'roughjs/bin/geometry'
+import type { RoughSVG } from 'roughjs/bin/svg'
+import { toRef } from 'vue'
+import type { ReactionProps } from '../common/utils'
+import { useReactionState } from '../common/utils'
+import RGraphics from '../graphics/index.vue'
+import RText from '../text/index.vue'
+
+defineOptions({
+  name: 'RIcon',
+})
+
+const {
+  name,
+  reactions = (() => ['']) as never,
+} = defineProps<{
+  name: string,
+} & ReactionProps>()
+
+const svgAttrs: Partial<Record<keyof SVGSVGElement, string>> = {
+  viewBox: '0 0 24 24',
+}
+
+const parser = new DOMParser()
+
+const elements = $computed<SVGElement[]>(() => {
+  const root = parser.parseFromString(`<svg>${icons[name]}</svg>`, 'image/svg+xml')
+  const doc = root.documentElement as unknown as SVGSVGElement
+  return Array.from(doc.children as HTMLCollectionOf<SVGElement>)
+})
+
+function getSVGElementValue(element: SVGElement, property: string) {
+  return element.attributes.getNamedItem(property)?.value
+}
+
+function getSVGElementValueAsNumber(element: SVGElement, property: string) {
+  const value = getSVGElementValue(element, property)
+  return value === undefined ? value : Number(value)
+}
+
+const getReactionState = useReactionState(toRef(() => reactions))
+
+function draw(rc: RoughSVG, svg: SVGSVGElement) {
+  getReactionState()
+  const options: Options = {
+    stroke: 'var(--r-icon-color)',
+    strokeWidth: 2,
+  }
+  for (const item of elements) {
+    switch (item.tagName) {
+      case 'ellipse': {
+        const ellipse = rc.ellipse(
+          getSVGElementValueAsNumber(item, 'cx') ?? 0,
+          getSVGElementValueAsNumber(item, 'cy') ?? 0,
+          (getSVGElementValueAsNumber(item, 'rx') ?? 0) * 2,
+          (getSVGElementValueAsNumber(item, 'ry') ?? 0) * 2,
+          options,
+        )
+        svg.appendChild(ellipse)
+        break
+      }
+      case 'circle': {
+        const circle = rc.circle(
+          getSVGElementValueAsNumber(item, 'cx') ?? 0,
+          getSVGElementValueAsNumber(item, 'cy') ?? 0,
+          (getSVGElementValueAsNumber(item, 'r') ?? 0) * 2,
+          options,
+        )
+        svg.appendChild(circle)
+        break
+      }
+      case 'line': {
+        const line = rc.line(
+          getSVGElementValueAsNumber(item, 'x1') ?? 0,
+          getSVGElementValueAsNumber(item, 'y1') ?? 0,
+          getSVGElementValueAsNumber(item, 'x2') ?? 0,
+          getSVGElementValueAsNumber(item, 'y2') ?? 0,
+          options,
+        )
+        svg.appendChild(line)
+        break
+      }
+      case 'path': {
+        const path = rc.path(getSVGElementValue(item, 'd') ?? '', options)
+        svg.appendChild(path)
+        break
+      }
+      case 'polygon': {
+        const points = getSVGElementValue(item, 'points') ?? ''
+        const positions = chunk((points.match(/\d+(?:\.\d+)?/g) ?? []).map(Number), 2) as Point[]
+        const polygon = rc.polygon(positions, options)
+        svg.appendChild(polygon)
+        break
+      }
+      case 'polyline': {
+        const points = getSVGElementValue(item, 'points') ?? ''
+        const positions = chunk((points.match(/\d+(?:\.\d+)?/g) ?? []).map(Number), 2) as Point[]
+        const linearPath = rc.linearPath(positions, options)
+        svg.appendChild(linearPath)
+        break
+      }
+      case 'rect': {
+        const rectangle = rc.rectangle(
+          getSVGElementValueAsNumber(item, 'x') ?? 0,
+          getSVGElementValueAsNumber(item, 'y') ?? 0,
+          getSVGElementValueAsNumber(item, 'width') ?? 0,
+          getSVGElementValueAsNumber(item, 'height') ?? 0,
+          options,
+        )
+        svg.appendChild(rectangle)
+        break
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <RText class="r-icon">
+    <RGraphics
+      :responsive="false"
+      v-bind="svgAttrs"
+      @draw="draw"
+    />
+  </RText>
+</template>
+
+<style lang="scss" scoped>
+.r-icon {
+  --r-icon-color: var(--r-common-text-color);
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  :deep(.r-graphics) {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>