From 0e0c317e17489d46b65d5b9cfafc0efa80328898 Mon Sep 17 00:00:00 2001 From: kagol Date: Fri, 6 Aug 2021 20:30:14 +0800 Subject: [PATCH 1/2] feat: add Icon component --- devui/icon/src/icon.tsx | 44 +++++++++++++++++++++ devui/vue-devui.ts | 3 +- package.json | 1 + sites/.vitepress/config/sidebar.ts | 1 + sites/components/icon/index.md | 62 ++++++++++++++++++++++++++++++ yarn.lock | 5 +++ 6 files changed, 115 insertions(+), 1 deletion(-) create mode 100644 devui/icon/src/icon.tsx create mode 100644 sites/components/icon/index.md diff --git a/devui/icon/src/icon.tsx b/devui/icon/src/icon.tsx new file mode 100644 index 00000000..651d505c --- /dev/null +++ b/devui/icon/src/icon.tsx @@ -0,0 +1,44 @@ +import { defineComponent } from 'vue' + +type IIconSize = 'lg' | 'md' | 'sm' +const SIZE_MAP = { + sm: '12px', + md: '16px', + lg: '24px' +} + +export default defineComponent({ + name: 'DIcon', + props: { + name: { + type: String + }, + size: { + type: String as () => IIconSize, + default: 'md' + }, + color: { + type: String, + default: '#252b3a' + }, + classPrefix: { + type: String, + default: 'icon' + }, + }, + setup(props) { + return { + ...props + } + }, + render() { + const { name, size, color, classPrefix } = this + + return ( + + ) + } +}) \ No newline at end of file diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts index eb082ecd..92ce3660 100644 --- a/devui/vue-devui.ts +++ b/devui/vue-devui.ts @@ -2,6 +2,7 @@ import { App } from 'vue'; // 通用 import Button from './button/button'; +import Icon from './icon/src/icon'; import Panel from './panel/panel'; // 导航 @@ -22,7 +23,7 @@ import Avatar from './avatar/avatar'; function install(app: App) { const packages = [ - Button, Panel, + Button, Icon, Panel, Tabs, Alert, Checkbox, Radio, Switch, TagsInput, TextInput, diff --git a/package.json b/package.json index b378ce33..bbac5659 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "publish": "cd dist && npm publish" }, "dependencies": { + "@devui-design/icons": "^1.3.0", "@types/lodash-es": "^4.17.4", "lodash-es": "^4.17.20", "vue": "^3.1.1", diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts index 15c00549..5dc1723d 100644 --- a/sites/.vitepress/config/sidebar.ts +++ b/sites/.vitepress/config/sidebar.ts @@ -5,6 +5,7 @@ const sidebar = { text: '通用', children: [ { text: 'Button 按钮', link: '/components/button/' }, + { text: 'Icon 图标', link: '/components/icon/' }, { text: 'Panel 面板', link: '/components/panel/' }, ] }, diff --git a/sites/components/icon/index.md b/sites/components/icon/index.md new file mode 100644 index 00000000..2d46c79f --- /dev/null +++ b/sites/components/icon/index.md @@ -0,0 +1,62 @@ +# Icon 图标 + +用于显示图标。 + +### 何时使用 + +需要显示图标时。 + +### 基本用法 + + + + + + +```html + + + + +``` + +### 自定义字体图标 + +Icon 组件默认引用 DevUI 图标库的图标，如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。 + +```css +@font-face { + font-family: 'my-icon'; + src: url('./my-icon.ttf') format('truetype'); +} + +.my-icon { + font-family: 'my-icon'; +} + +.my-icon-right::before { + content: '\E03F'; +} +``` + +引入字体图标的css + +```css +@import 'my-icon.css'; +``` + +or + +```js +import 'my-icon.css'; +``` + +使用 + +```html + +``` + + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 0d9e9b62..42c5f811 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1200,6 +1200,11 @@ resolved "https://registry.nlark.com/@commitlint/types/download/@commitlint/types-11.0.0.tgz#719cf05fcc1abb6533610a2e0f5dd1e61eac14fe" integrity sha1-cZzwX8wau2UzYQouD13R5h6sFP4= +"@devui-design/icons@^1.3.0": + version "1.3.0" + resolved "https://registry.nlark.com/@devui-design/icons/download/@devui-design/icons-1.3.0.tgz#5a3006a31ee4f62e3f9837b68c031898ff148b88" + integrity sha1-WjAGox7k9i4/mDe2jAMYmP8Ui4g= + "@docsearch/css@^1.0.0-alpha.28": version "1.0.0-alpha.28" resolved "https://registry.nlark.com/@docsearch/css/download/@docsearch/css-1.0.0-alpha.28.tgz#c8a2cd8c1bb3a6855c51892e9dbdab5d42fe6e23" -- Gitee From 6b14521e4762f08321c1d896e51dd2581534cf08 Mon Sep 17 00:00:00 2001 From: kagol Date: Sat, 7 Aug 2021 21:10:45 +0800 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96icon=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/icon/src/icon.tsx | 12 ++++++++---- devui/vue-devui.ts | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/devui/icon/src/icon.tsx b/devui/icon/src/icon.tsx index 651d505c..e651d78e 100644 --- a/devui/icon/src/icon.tsx +++ b/devui/icon/src/icon.tsx @@ -1,6 +1,6 @@ import { defineComponent } from 'vue' -type IIconSize = 'lg' | 'md' | 'sm' +type IIconSize = 'sm' | 'md' | 'lg' const SIZE_MAP = { sm: '12px', md: '16px', @@ -11,11 +11,15 @@ export default defineComponent({ name: 'DIcon', props: { name: { - type: String + type: String, + required: true }, size: { type: String as () => IIconSize, - default: 'md' + default: 'md', + validator: (value: string) => { + return Object.keys(SIZE_MAP).includes(value) + } }, color: { type: String, @@ -35,7 +39,7 @@ export default defineComponent({ const { name, size, color, classPrefix } = this return ( - diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts index 92ce3660..5dfe708b 100644 --- a/devui/vue-devui.ts +++ b/devui/vue-devui.ts @@ -39,7 +39,7 @@ function install(app: App) { } export { - Button, Panel, + Button, Icon, Panel, Tabs, Alert, Checkbox, Radio, Switch, TagsInput, TextInput, -- Gitee