From c369b347b408bf8a5d69f70f54c72ba85572414b Mon Sep 17 00:00:00 2001 From: richard1015 <51844712@qq.com> Date: Thu, 5 Nov 2020 18:12:06 +0800 Subject: [PATCH] feat: icon --- babel.config.js | 2 +- commitlint.config.js | 2 +- src/nutui.ts | 11 +- src/packages/button/demo.vue | 2 - src/packages/cell/demo.vue | 2 - src/packages/icon/demo.vue | 63 +++++++++- src/packages/icon/doc.md | 76 ++++++++++- src/packages/icon/index.scss | 1 + src/packages/icon/index.vue | 45 +++---- src/packages/price/demo.vue | 6 - src/sites/mobile/App.vue | 5 +- src/sites/mobile/main.ts | 3 +- src/styles/font/demo_index.html | 216 ++++++++++++++++---------------- src/styles/font/iconfont.css | 64 +++++----- src/styles/font/iconfont.eot | Bin 5488 -> 5584 bytes src/styles/font/iconfont.js | 20 +-- src/styles/font/iconfont.json | 6 +- src/styles/font/iconfont.svg | 4 +- src/styles/font/iconfont.ttf | Bin 5320 -> 5392 bytes src/styles/font/iconfont.woff | Bin 3248 -> 3264 bytes src/styles/font/iconfont.woff2 | Bin 2604 -> 2588 bytes tsconfig.json | 1 + 22 files changed, 331 insertions(+), 198 deletions(-) diff --git a/babel.config.js b/babel.config.js index 397abca88..916db641e 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,3 @@ module.exports = { - presets: ["@vue/cli-plugin-babel/preset"] + presets: ['@vue/cli-plugin-babel/preset'] }; diff --git a/commitlint.config.js b/commitlint.config.js index 1c7eddd6e..249ee8819 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -12,4 +12,4 @@ module.exports = { 'type-empty': [2, 'never'], 'type-enum': [2, 'always', ['upd', 'chore', 'docs', 'feat', 'fix', 'test', 'refactor', 'revert', 'style']] } -} +}; diff --git a/src/nutui.ts b/src/nutui.ts index ff8b4c563..365807f42 100644 --- a/src/nutui.ts +++ b/src/nutui.ts @@ -1 +1,10 @@ -export default {}; +import { App } from 'vue'; +export default { + install(app: App): void { + const files = require.context('@/packages', true, /index\.vue$/); + files.keys().forEach(component => { + const componentEntity = files(component).default; + app.component(componentEntity.name, componentEntity); + }); + } +}; diff --git a/src/packages/button/demo.vue b/src/packages/button/demo.vue index 18a55fa16..bebbae3de 100644 --- a/src/packages/button/demo.vue +++ b/src/packages/button/demo.vue @@ -45,14 +45,12 @@ diff --git a/src/packages/cell/demo.vue b/src/packages/cell/demo.vue index 241f32402..4f9b91464 100644 --- a/src/packages/cell/demo.vue +++ b/src/packages/cell/demo.vue @@ -11,12 +11,10 @@ diff --git a/src/packages/icon/demo.vue b/src/packages/icon/demo.vue index 2271a51c7..50cea4a01 100644 --- a/src/packages/icon/demo.vue +++ b/src/packages/icon/demo.vue @@ -1,18 +1,71 @@ - + diff --git a/src/packages/icon/doc.md b/src/packages/icon/doc.md index 1a75a6dd1..7261cf3dc 100644 --- a/src/packages/icon/doc.md +++ b/src/packages/icon/doc.md @@ -2,7 +2,7 @@ ### 介绍 -图标组件 +基于 IconFont 字体的图标集，可以通过 Icon 组件使用。 ### 安装 @@ -14,3 +14,77 @@ const app = createApp(); app.use(Icon); ``` + +## 代码演示 + +### 基础用法 + +`Icon` 的 `name` 属性支持传入图标名称或图片链接。 + +```html + + +``` + +### 图标颜色 + +`Icon` 的 `color` 属性用来设置图标的颜色。 + +```html + + +``` + +### 图标大小 + +`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。 + +```html + + + +``` + +### 自定义图标 + +如果需要在现有 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-extra::before { + content: '\e626'; +} +``` + +```html + + +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| name | 图标名称或图片链接 | _string_ | - | +| color | 图标颜色 | _string_ | - | +| size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | - | +| class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `nutui-icon` | +| tag | HTML 标签 | _string_ | `i` | + +### Events + +| 事件名 | 说明 | 回调参数 | +| ------ | -------------- | -------------- | +| click | 点击图标时触发 | _event: Event_ | + diff --git a/src/packages/icon/index.scss b/src/packages/icon/index.scss index 64a6118ec..f872f2b4c 100644 --- a/src/packages/icon/index.scss +++ b/src/packages/icon/index.scss @@ -1,3 +1,4 @@ +@import '../../styles/font/iconfont.css'; .nut-icon { width: 20px; height: 20px; diff --git a/src/packages/icon/index.vue b/src/packages/icon/index.vue index dbfd3b107..ac901c2d6 100644 --- a/src/packages/icon/index.vue +++ b/src/packages/icon/index.vue @@ -1,38 +1,41 @@ - - diff --git a/src/packages/price/demo.vue b/src/packages/price/demo.vue index 3c9db67b3..245636d49 100644 --- a/src/packages/price/demo.vue +++ b/src/packages/price/demo.vue @@ -16,17 +16,11 @@ diff --git a/src/sites/mobile/App.vue b/src/sites/mobile/App.vue index 4d1132c3a..113c02fee 100644 --- a/src/sites/mobile/App.vue +++ b/src/sites/mobile/App.vue @@ -5,7 +5,6 @@