feat: svg 组件支持尺寸参数

README.md

@@ -1,6 +1,5 @@
 **TODO**
 
-* svg 尺寸参数
 * svg 图标模式
 * Markdown 代码高亮
 * Markdown 代码复制

d2/components/d2/svg/index.jsx

@@ -1,7 +1,9 @@
 import makeClassnames from 'classnames'
 import { defineComponent, unref, computed } from 'vue'
+import { omitBy, isEmpty } from 'lodash-es'
 import { useConfig } from 'd2/components/d2/config/use.js'
 import { makeName, makeClassName } from 'd2/utils/component.js'
+import { cssUnit } from 'd2/utils/css.js'
 import { warn } from 'd2/utils/error.js'
 import { componentName as configComponentName } from 'd2/components/d2/config/index.jsx'
 
@@ -41,20 +43,40 @@ export default defineComponent({
       return _href
     })
 
+    const height = computed(() => {
+      const v = props.height || props.size
+      return v ? cssUnit(v) : ''
+    })
+    const width = computed(() => {
+      const v = props.width || props.size
+      return v ? cssUnit(v) : ''
+    })
+
+    const style = computed(() => omitBy({
+      height: unref(height),
+      width: unref(width)
+    }, isEmpty))
+
     const classnames = computed(() => makeClassnames(classname, {}))
 
     return {
+      style,
       classnames,
       href
     }
   },
   render () {
     const {
+      style,
       classnames,
       href
     } = this
     return (
-      <svg class={ classnames } aria-hidden="true">
+      <svg
+        class={ classnames }
+        style={ style }
+        aria-hidden="true"
+      >
         <use xlink:href={ href }/>
       </svg>
     )

d2/menus/index.js

@@ -13,6 +13,7 @@ export const demoMenus = new Menu('组件')
       .icon('icon-park-outline:pic-one')
       .scope('/dashboard/demo/component/svg')
       .add(new Menu('基础').url('/base'))
+      .add(new Menu('尺寸').url('/size'))
   )
   .add(
     new Menu('图标')

d2/views/dashboard/demo/component/svg/size.md

@@ -0,0 +1,46 @@
+``` html
+<d2-svg dir="arrow" name="right" width="100"/>
+```
+<d2-svg dir="arrow" name="right" width="100"/>
+
+``` html
+<d2-svg dir="arrow" name="right" height="100"/>
+```
+<d2-svg dir="arrow" name="right" height="100"/>
+
+``` html
+<d2-svg dir="arrow" name="right" width="100" height="100"/>
+```
+<d2-svg dir="arrow" name="right" width="100" height="100"/>
+
+``` html
+<d2-svg dir="arrow" name="right" size="100"/>
+```
+<d2-svg dir="arrow" name="right" size="100"/>
+
+``` html
+<d2-svg dir="arrow" name="right" size="100px"/>
+```
+<d2-svg dir="arrow" name="right" size="100px"/>
+
+``` html
+<d2-svg dir="arrow" name="right" :size="100"/>
+```
+<d2-svg dir="arrow" name="right" :size="100"/>
+
+``` html
+<p>
+  Hello
+  <span class="d2-icon">
+    <d2-svg dir="arrow" name="right" size="1em"/>
+  </span>
+  World
+</p>
+```
+<p>
+  Hello
+  <span class="d2-icon">
+    <d2-svg dir="arrow" name="right" size="1em"/>
+  </span>
+  World
+</p>