publish(@omiu/o-icon)
This commit is contained in:
dntzhang
parent
069c5e8d2b
commit
cf5a4cfa27
|
|
@ -0,0 +1,51 @@
|
|||
## OIcon
|
||||
|
||||
SVG Icon
|
||||
|
||||
<iframe height="351" style="width: 100%;" scrolling="no" title="OMIU OIcon" src="https://codepen.io/omijs/embed/QWjgapY?height=351&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/QWjgapY'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## Import
|
||||
|
||||
```js
|
||||
import '@omiu/o-icon'
|
||||
```
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/o-icon"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<o-o-icon></o-o-icon>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
```tsx
|
||||
{
|
||||
path?: string,
|
||||
paths?: object,
|
||||
view?: number,
|
||||
scale?: number,
|
||||
color?: string,
|
||||
rotate?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
### 默认属性
|
||||
|
||||
```tsx
|
||||
{
|
||||
view: 1024,
|
||||
scale: 2
|
||||
)
|
||||
```
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
## OIcon 矢量图标
|
||||
|
||||
SVG 矢量图标
|
||||
|
||||
<iframe height="351" style="width: 100%;" scrolling="no" title="OMIU OIcon" src="https://codepen.io/omijs/embed/QWjgapY?height=351&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/QWjgapY'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## 导入
|
||||
|
||||
```js
|
||||
import '@omiu/o-icon'
|
||||
```
|
||||
|
||||
或者直接 script 标签引入。
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/o-icon"></script>
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
```html
|
||||
<o-o-icon> </o-o-icon>
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
```tsx
|
||||
{
|
||||
path?: string,
|
||||
paths?: object,
|
||||
view?: number,
|
||||
scale?: number,
|
||||
color?: string,
|
||||
rotate?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
### 默认属性
|
||||
```tsx
|
||||
{
|
||||
view: 1024,
|
||||
scale: 2
|
||||
)
|
||||
```
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
## OIcon
|
||||
|
||||
SVG Icon
|
||||
|
||||
* [→ CodePen](https://codepen.io/omijs/pen/QWjgapY)
|
||||
|
||||
## Import
|
||||
|
||||
```js
|
||||
import '@omiu/o-icon'
|
||||
```
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/o-icon"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<o-o-icon></o-o-icon>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
```tsx
|
||||
{
|
||||
path?: string,
|
||||
paths?: object,
|
||||
view?: number,
|
||||
scale?: number,
|
||||
color?: string,
|
||||
rotate?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
### 默认属性
|
||||
|
||||
```tsx
|
||||
{
|
||||
view: 1024,
|
||||
scale: 2
|
||||
)
|
||||
```
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Omiu ActionSheet</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="">
|
||||
</a>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/index.js"></script>
|
||||
|
||||
|
||||
|
||||
<h3>Scale=2</h3>
|
||||
<br />
|
||||
|
||||
<o-icon view='24'
|
||||
path='M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z'>
|
||||
</o-icon>
|
||||
|
||||
<o-icon view='48'
|
||||
path='M40 10H21.76L20 4H8C5.8 4 4 5.8 4 8v26c0 2.2 1.8 4 4 4h14l2 6h16c2.2 0 4-1.8 4-4V14c0-2.2-1.8-4-4-4zM14.33 29.17c-4.51 0-8.17-3.67-8.17-8.17s3.67-8.17 8.17-8.17c2.08 0 3.97.74 5.47 2.13l.13.13-2.44 2.36-.12-.11c-.57-.54-1.56-1.17-3.04-1.17-2.62 0-4.75 2.17-4.75 4.84s2.13 4.84 4.75 4.84c2.74 0 3.93-1.75 4.25-2.92h-4.42v-3.1h7.9l.03.14c.08.42.11.79.11 1.21-.01 4.71-3.24 7.99-7.87 7.99zm12.07-3.4c.67 1.2 1.48 2.35 2.38 3.4l-1.07 1.06-1.31-4.46zm1.54-1.54h-1.98l-.61-2.08h7.99s-.68 2.63-3.12 5.47c-1.07-1.23-1.81-2.43-2.28-3.39zM42 40c0 1.1-.9 2-2 2H26l4-4-1.63-5.53 1.84-1.84L35.58 36l1.46-1.46-5.41-5.37c1.8-2.07 3.2-4.5 3.83-7.01H38v-2.08h-7.27V18h-2.08v2.08h-3.92L22.35 12H40c1.1 0 2 .9 2 2v26z'>
|
||||
</o-icon>
|
||||
|
||||
<o-icon
|
||||
path='M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z'>
|
||||
</o-icon>
|
||||
|
||||
<o-icon paths="[{
|
||||
color: '#F98080',
|
||||
path: 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z'
|
||||
},
|
||||
{
|
||||
color: '#F95050',
|
||||
path: 'M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z'
|
||||
}]">
|
||||
</o-icon>
|
||||
|
||||
<o-icon view='48' paths="[{
|
||||
color: '#0072d9',
|
||||
path: 'M24 42.7l-2.9-2.63C10.8 30.72 4 24.55 4 17 4 10.83 8.83 6 15 6c3.48 0 6.82 1.62 9 4.17C26.18 7.62 29.52 6 33 6c6.17 0 11 4.83 11 11 0 7.55-6.8 13.72-17.1 23.07L24 42.7z'
|
||||
}]">
|
||||
</o-icon>
|
||||
|
||||
<br /><br />
|
||||
<h3>Scale=3</h3>
|
||||
<br />
|
||||
|
||||
<o-icon rotate view='24' scale='3'
|
||||
path='M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z'>
|
||||
</o-icon>
|
||||
|
||||
<o-icon view='48' scale='3'
|
||||
path='M40 10H21.76L20 4H8C5.8 4 4 5.8 4 8v26c0 2.2 1.8 4 4 4h14l2 6h16c2.2 0 4-1.8 4-4V14c0-2.2-1.8-4-4-4zM14.33 29.17c-4.51 0-8.17-3.67-8.17-8.17s3.67-8.17 8.17-8.17c2.08 0 3.97.74 5.47 2.13l.13.13-2.44 2.36-.12-.11c-.57-.54-1.56-1.17-3.04-1.17-2.62 0-4.75 2.17-4.75 4.84s2.13 4.84 4.75 4.84c2.74 0 3.93-1.75 4.25-2.92h-4.42v-3.1h7.9l.03.14c.08.42.11.79.11 1.21-.01 4.71-3.24 7.99-7.87 7.99zm12.07-3.4c.67 1.2 1.48 2.35 2.38 3.4l-1.07 1.06-1.31-4.46zm1.54-1.54h-1.98l-.61-2.08h7.99s-.68 2.63-3.12 5.47c-1.07-1.23-1.81-2.43-2.28-3.39zM42 40c0 1.1-.9 2-2 2H26l4-4-1.63-5.53 1.84-1.84L35.58 36l1.46-1.46-5.41-5.37c1.8-2.07 3.2-4.5 3.83-7.01H38v-2.08h-7.27V18h-2.08v2.08h-3.92L22.35 12H40c1.1 0 2 .9 2 2v26z'>
|
||||
</o-icon>
|
||||
|
||||
<o-icon scale='3'
|
||||
path='M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z'>
|
||||
</o-icon>
|
||||
|
||||
<o-icon rotate scale='3' paths="[{
|
||||
color: '#F98080',
|
||||
path: 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z'
|
||||
},
|
||||
{
|
||||
color: '#F95050',
|
||||
path: 'M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z'
|
||||
}]">
|
||||
</o-icon>
|
||||
|
||||
<o-icon view='48' scale='3' paths="[{
|
||||
color: '#0072d9',
|
||||
path: 'M24 42.7l-2.9-2.63C10.8 30.72 4 24.55 4 17 4 10.83 8.83 6 15 6c3.48 0 6.82 1.62 9 4.17C26.18 7.62 29.52 6 33 6c6.17 0 11 4.83 11 11 0 7.55-6.8 13.72-17.1 23.07L24 42.7z'
|
||||
}]">
|
||||
</o-icon>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
{
|
||||
"name": "@omiu/o-icon",
|
||||
"version": "0.0.1",
|
||||
"description": "SVG Icon",
|
||||
"docsExtend": {
|
||||
"cnName": "矢量图标",
|
||||
"cnDescription": "SVG 矢量图标",
|
||||
"codepen": "QWjgapY",
|
||||
"codepenHeight": 351,
|
||||
"codepenDefaultTab": "html,result"
|
||||
},
|
||||
"main": "src/index.js",
|
||||
"module": "src/index.esm.js",
|
||||
"types": "src/index.d.ts",
|
||||
"scripts": {
|
||||
"docs": "node ./scripts/docs-gen.js",
|
||||
"start": "node ./scripts/webpack.build.js -- demo",
|
||||
"build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
|
||||
},
|
||||
"typings": "./dist/index.d.ts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/omi.git"
|
||||
},
|
||||
"files": [
|
||||
"src",
|
||||
"dist",
|
||||
"typings.json"
|
||||
],
|
||||
"keywords": [
|
||||
"omiu",
|
||||
"omi",
|
||||
"omio",
|
||||
"preact",
|
||||
"react",
|
||||
"virtual dom",
|
||||
"vdom",
|
||||
"components",
|
||||
"virtual",
|
||||
"dom"
|
||||
],
|
||||
"author": "dntzhang <dntzhang@qq.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Tencent/omi/issues"
|
||||
},
|
||||
"homepage": "http://omijs.org",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^11.1.0",
|
||||
"css": "^2.2.4",
|
||||
"css-loader": "^1.0.1",
|
||||
"file": "^0.2.2",
|
||||
"file-loader": "^2.0.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"less": "^3.9.0",
|
||||
"less-loader": "^4.1.0",
|
||||
"mini-css-extract-plugin": "^0.4.5",
|
||||
"node-sass": "^4.12.0",
|
||||
"omi": "latest",
|
||||
"omio": "latest",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"progress-bar-webpack-plugin": "^2.1.0",
|
||||
"resolve-url-loader": "^3.1.0",
|
||||
"rollup": "^2.7.1",
|
||||
"rollup-plugin-license": "^2.0.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-scss": "^2.4.0",
|
||||
"rollup-plugin-typescript": "^1.0.1",
|
||||
"sass-loader": "^7.1.0",
|
||||
"style-loader": "^0.23.1",
|
||||
"to-string-loader": "^1.1.5",
|
||||
"ts-loader": "^5.4.4",
|
||||
"typescript": "^3.2.1",
|
||||
"url": "^0.11.0",
|
||||
"url-loader": "^1.1.2",
|
||||
"webpack": "^4.42.1",
|
||||
"webpack-cli": "^3.3.1",
|
||||
"webpack-dev-server": "^3.1.10",
|
||||
"webpack-merge": "^4.1.4"
|
||||
},
|
||||
"greenkeeper": {
|
||||
"ignore": [
|
||||
"babel-cli",
|
||||
"babel-core",
|
||||
"babel-eslint",
|
||||
"babel-loader",
|
||||
"jscodeshift",
|
||||
"rollup-plugin-babel"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
},
|
||||
"dependencies": {
|
||||
"@omiu/common": "latest",
|
||||
"omi": "latest"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
//自动扫描 index.tsx 生成 readme
|
||||
const fs = require('fs')
|
||||
|
||||
const content = fs.readFileSync('./src/index.tsx', 'utf-8')
|
||||
|
||||
const props = content.match(new RegExp('interface Props \\{[\\s\\S]*?}'))[0].replace('interface Props ', '')
|
||||
|
||||
const defaultPropsContext = content.match(new RegExp('static defaultProps = \\{[\\s\\S]*?}'))
|
||||
let defaultProps
|
||||
|
||||
if (defaultPropsContext) {
|
||||
|
||||
defaultProps = defaultPropsContext[0].replace('static defaultProps = ', '').replace(/ /g, ' ').replace(/ }/g, ')')
|
||||
}
|
||||
|
||||
|
||||
const eventContexts = content.match(new RegExp('this.fire\\([\\s\\S]*?[,|)]', 'g'))
|
||||
const package = require('../package.json')
|
||||
const packageName = package.name
|
||||
const name = packageName.split('/')[1]
|
||||
|
||||
const upperCaseName = name.split('-').map(item => {
|
||||
return item.charAt(0).toUpperCase() + item.slice(1)
|
||||
}).join('')
|
||||
const tagName = 'o-' + name
|
||||
|
||||
//fire 附近打标标记 event.detail 类型？
|
||||
let events, eventMap
|
||||
if (eventContexts) {
|
||||
|
||||
events = eventContexts.map(event => {
|
||||
return event.replace('this.fire(\'', '').replace('\',', '').replace('\')', '')
|
||||
})
|
||||
eventMap = {}
|
||||
events.forEach(event => {
|
||||
eventMap[event] = 1
|
||||
})
|
||||
}
|
||||
|
||||
const cnContent = `## ${upperCaseName} ${package.docsExtend.cnName}
|
||||
|
||||
${package.docsExtend.cnDescription}
|
||||
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## 导入
|
||||
|
||||
\`\`\`js
|
||||
import '${packageName}'
|
||||
\`\`\`
|
||||
|
||||
或者直接 script 标签引入。
|
||||
|
||||
|
||||
\`\`\`html
|
||||
<script src="https://unpkg.com/${packageName}"></script>
|
||||
\`\`\`
|
||||
|
||||
## 使用
|
||||
|
||||
\`\`\`html
|
||||
<${tagName}> </${tagName}>
|
||||
\`\`\`
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
\`\`\`tsx
|
||||
${props}
|
||||
\`\`\`
|
||||
|
||||
${defaultProps ? '### 默认属性\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
|
||||
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### 事件\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
|
||||
return `* ${event}\n`
|
||||
}).join('') : ''}`
|
||||
|
||||
fs.writeFileSync(`../docs-src/src/docs/zh-cn/${name}.md`, cnContent)
|
||||
|
||||
|
||||
|
||||
const enContent = `## ${upperCaseName}
|
||||
|
||||
${package.description}
|
||||
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## Import
|
||||
|
||||
\`\`\`js
|
||||
import '${packageName}'
|
||||
\`\`\`
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
\`\`\`html
|
||||
<script src="https://unpkg.com/${packageName}"></script>
|
||||
\`\`\`
|
||||
|
||||
## Usage
|
||||
|
||||
\`\`\`html
|
||||
<${tagName}></${tagName}>
|
||||
\`\`\`
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
\`\`\`tsx
|
||||
${props}
|
||||
\`\`\`
|
||||
|
||||
${defaultProps ? '### 默认属性\n\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
|
||||
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### Events\n\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
|
||||
return `* ${event}\n`
|
||||
}).join('') : ''}`
|
||||
|
||||
|
||||
fs.writeFileSync(`../docs-src/src/docs/en/${name}.md`, enContent)
|
||||
|
||||
|
||||
fs.writeFileSync(`../${name}/README.md`, enContent.replace(/<iframe[\s\S]*?<\/iframe>/, `* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`))
|
||||
// console.log(props)
|
||||
// console.log(defaultProps)
|
||||
// console.log(Object.keys(eventMap))
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import nodeResolve from "rollup-plugin-node-resolve";
|
||||
|
||||
import typescript from 'rollup-plugin-typescript';
|
||||
import scss from 'rollup-plugin-scss'
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
const fs = require('fs')
|
||||
const license = require("rollup-plugin-license");
|
||||
const pkg = require("../package.json");
|
||||
const licensePlugin = license({
|
||||
banner: `${pkg.name} v${pkg.version} http://omijs.org\r\nFront End Cross-Frameworks Framework.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omi\r\n MIT Licensed.`
|
||||
});
|
||||
|
||||
export default {
|
||||
input: "src/index.tsx",
|
||||
output: {
|
||||
format: "es",
|
||||
file: "./src/index.esm.js",
|
||||
name: pkg.name,
|
||||
sourcemap: true,
|
||||
strict: true
|
||||
},
|
||||
plugins: [
|
||||
nodeResolve({
|
||||
main: true
|
||||
}),
|
||||
scss({
|
||||
//output: false,
|
||||
output: function (styles, styleNodes) {
|
||||
fs.writeFileSync('./src/index.css', styles)
|
||||
},
|
||||
}),
|
||||
typescript(),
|
||||
commonjs(),
|
||||
|
||||
licensePlugin
|
||||
],
|
||||
external: ['omi']
|
||||
};
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
const fs = require('fs')
|
||||
|
||||
const css = fs.readFileSync('./src/index.css')
|
||||
|
||||
const js = fs.readFileSync('./src/index.esm.js', 'utf-8')
|
||||
|
||||
|
||||
fs.writeFileSync('./src/index.esm.js',
|
||||
js.replace(`var css = /*#__PURE__*/Object.freeze({
|
||||
__proto__: null
|
||||
});`, `
|
||||
var css = \`${css}\`
|
||||
`)
|
||||
)
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
const path = require('path')
|
||||
const glob = require('glob')
|
||||
const webpack = require('webpack')
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
|
||||
const pkgName = require('../package.json')
|
||||
const componentName = pkgName.name.split('/')[1]
|
||||
|
||||
const name = 'o-' + componentName
|
||||
const library = 'O' + componentName.split('-').map(name => name.charAt(0).toUpperCase() + name.slice(1)).join('')
|
||||
|
||||
|
||||
const config = {
|
||||
devtool: 'source-map',
|
||||
plugins: [
|
||||
new ProgressBarPlugin()
|
||||
],
|
||||
entry: {
|
||||
[name]: './src/index.tsx'
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../src/'),
|
||||
filename: 'index.js',
|
||||
libraryTarget: 'umd',
|
||||
library: library,
|
||||
libraryExport: "default",
|
||||
globalObject: 'this'
|
||||
},
|
||||
mode: 'development',
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
'to-string-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'resolve-url-loader'
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
|
||||
// mdc-web doesn't use sass-loader's normal syntax for imports
|
||||
// across modules, so we add all module directories containing
|
||||
// mdc-web components to the Sass include path
|
||||
// https://github.com/material-components/material-components-web/issues/351
|
||||
includePaths: glob.sync(path.join(__dirname, '../node_modules/@material')).map((dir) => path.dirname(dir))
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'to-string-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'resolve-url-loader'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'resolve-url-loader'
|
||||
},
|
||||
'less-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(jpe?g|png|gif|svg)$/i,
|
||||
loader: "url-loader"
|
||||
},
|
||||
{
|
||||
test: /\.[t|j]sx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: /node_modules/
|
||||
}
|
||||
]
|
||||
},
|
||||
watch: process.argv[3] === 'demo',
|
||||
externals: {
|
||||
'omi': {
|
||||
commonjs: "omi",
|
||||
commonjs2: "omi",
|
||||
amd: "omi",
|
||||
root: "Omi"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
webpack(config, (err, stats) => { // Stats Object
|
||||
if (err || stats.hasErrors()) {
|
||||
// Handle errors here
|
||||
}
|
||||
// Done processing
|
||||
|
||||
})
|
||||
|
|
@ -1,31 +1,28 @@
|
|||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
.m-icon {
|
||||
display: inline-block; }
|
||||
|
||||
.o-icon {
|
||||
text-align: center;
|
||||
display: inline-block; }
|
||||
|
||||
.o-icon svg {
|
||||
display: inline-block;
|
||||
}
|
||||
.m-icon svg {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
vertical-align: top; }
|
||||
|
||||
.rotate {
|
||||
display: inline-block;
|
||||
-webkit-animation: rotate 1s infinite linear;
|
||||
animation: rotate 1s infinite linear;
|
||||
}
|
||||
animation: rotate 1s infinite linear; }
|
||||
|
||||
i div {
|
||||
font-style: normal;
|
||||
}
|
||||
font-style: normal; }
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
transform: rotate(360deg); } }
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import { WeElement } from 'omi';
|
||||
import '../theme.ts';
|
||||
interface Props {
|
||||
path?: string;
|
||||
paths?: object;
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
/**
|
||||
* @omiu/o-icon v0.0.1 http://omijs.org
|
||||
* Front End Cross-Frameworks Framework.
|
||||
* By dntzhang https://github.com/dntzhang
|
||||
* Github: https://github.com/Tencent/omi
|
||||
* MIT Licensed.
|
||||
*/
|
||||
|
||||
import { h, extractClass, classNames, tag, WeElement } from 'omi';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
||||
this file except in compliance with the License. You may obtain a copy of the
|
||||
License at http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
||||
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
||||
MERCHANTABLITY OR NON-INFRINGEMENT.
|
||||
|
||||
See the Apache Version 2.0 License for specific language governing permissions
|
||||
and limitations under the License.
|
||||
***************************************************************************** */
|
||||
/* global Reflect, Promise */
|
||||
|
||||
var extendStatics = function(d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
|
||||
function __extends(d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
}
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
function __decorate(decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
}
|
||||
|
||||
|
||||
var css = `:host {
|
||||
display: inline-block; }
|
||||
|
||||
.o-icon {
|
||||
text-align: center;
|
||||
display: inline-block; }
|
||||
|
||||
.o-icon svg {
|
||||
display: inline-block;
|
||||
vertical-align: top; }
|
||||
|
||||
.rotate {
|
||||
display: inline-block;
|
||||
-webkit-animation: rotate 1s infinite linear;
|
||||
animation: rotate 1s infinite linear; }
|
||||
|
||||
i div {
|
||||
font-style: normal; }
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
`
|
||||
|
||||
|
||||
var Icon = /** @class */ (function (_super) {
|
||||
__extends(Icon, _super);
|
||||
function Icon() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Icon.prototype.render = function (props) {
|
||||
return (h("i", __assign({}, extractClass(props, 'o-icon')),
|
||||
h("svg", { viewBox: '0 0 ' + props.view + ' ' + props.view, class: classNames({ rotate: props.rotate }), width: props.scale + 'em', height: props.scale + 'em', fill: props.color, "aria-hidden": "true" }, props.paths ? (props.paths.map(function (item) {
|
||||
var attrs = { d: item.path, fill: props.color || 'black' };
|
||||
if (item.color)
|
||||
attrs.fill = item.color;
|
||||
return h("path", __assign({}, attrs));
|
||||
})) : h("path", { d: props.path })),
|
||||
props.children && (h("div", { style: "color:" + (props.color || 'black') + ";" }, props.children[0]))));
|
||||
};
|
||||
Icon.css = css;
|
||||
Icon.defaultProps = {
|
||||
view: 1024,
|
||||
scale: 2
|
||||
};
|
||||
Icon.propTypes = {
|
||||
path: String,
|
||||
paths: Object,
|
||||
view: Number,
|
||||
scale: Number,
|
||||
color: String,
|
||||
rotate: Boolean
|
||||
};
|
||||
Icon = __decorate([
|
||||
tag('o-icon')
|
||||
], Icon);
|
||||
return Icon;
|
||||
}(WeElement));
|
||||
|
||||
export default Icon;
|
||||
//# sourceMappingURL=index.esm.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -4,10 +4,10 @@
|
|||
else if(typeof define === 'function' && define.amd)
|
||||
define(["omi"], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["MIcon"] = factory(require("omi"));
|
||||
exports["OOIcon"] = factory(require("omi"));
|
||||
else
|
||||
root["MIcon"] = factory(root["Omi"]);
|
||||
})(window, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
|
||||
root["OOIcon"] = factory(root["Omi"]);
|
||||
})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
|
|
@ -91,34 +91,34 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = "./src/icon/index.tsx");
|
||||
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.tsx");
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js?!./src/icon/index.scss":
|
||||
/*!******************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./src/icon/index.scss ***!
|
||||
\******************************************************************************************************************************************/
|
||||
/***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss":
|
||||
/*!****************************************************************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./src/index.scss ***!
|
||||
\****************************************************************************************************************************************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(false);
|
||||
exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js */ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js")(false);
|
||||
// imports
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, ":host {\n display: inline-block; }\n\n.m-icon {\n text-align: center;\n display: inline-block; }\n\n.m-icon svg {\n display: inline-block;\n vertical-align: top; }\n\n.rotate {\n display: inline-block;\n -webkit-animation: rotate 1s infinite linear;\n animation: rotate 1s infinite linear; }\n\ni div {\n font-style: normal; }\n\n@-webkit-keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n@keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n", ""]);
|
||||
exports.push([module.i, ":host {\n display: inline-block; }\n\n.o-icon {\n text-align: center;\n display: inline-block; }\n\n.o-icon svg {\n display: inline-block;\n vertical-align: top; }\n\n.rotate {\n display: inline-block;\n -webkit-animation: rotate 1s infinite linear;\n animation: rotate 1s infinite linear; }\n\ni div {\n font-style: normal; }\n\n@-webkit-keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n@keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/css-loader/lib/css-base.js":
|
||||
/*!*************************************************!*\
|
||||
!*** ./node_modules/css-loader/lib/css-base.js ***!
|
||||
\*************************************************/
|
||||
/***/ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js":
|
||||
/*!*******************************************************************!*\
|
||||
!*** ./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js ***!
|
||||
\*******************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
|
|
@ -202,15 +202,15 @@ function toComment(sourceMap) {
|
|||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/icon/index.scss":
|
||||
/*!*****************************!*\
|
||||
!*** ./src/icon/index.scss ***!
|
||||
\*****************************/
|
||||
/***/ "./src/index.scss":
|
||||
/*!************************!*\
|
||||
!*** ./src/index.scss ***!
|
||||
\************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
||||
var result = __webpack_require__(/*! !../../node_modules/css-loader!../../node_modules/resolve-url-loader!../../node_modules/sass-loader/dist/cjs.js??ref--4-3!./index.scss */ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js?!./src/icon/index.scss");
|
||||
var result = __webpack_require__(/*! !../node_modules/_css-loader@1.0.1@css-loader!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./index.scss */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss");
|
||||
|
||||
if (typeof result === "string") {
|
||||
module.exports = result;
|
||||
|
|
@ -221,10 +221,10 @@ function toComment(sourceMap) {
|
|||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/icon/index.tsx":
|
||||
/*!****************************!*\
|
||||
!*** ./src/icon/index.tsx ***!
|
||||
\****************************/
|
||||
/***/ "./src/index.tsx":
|
||||
/*!***********************!*\
|
||||
!*** ./src/index.tsx ***!
|
||||
\***********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
|
@ -262,16 +262,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|||
};
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var omi_1 = __webpack_require__(/*! omi */ "omi");
|
||||
var css = __webpack_require__(/*! ./index.scss */ "./src/icon/index.scss");
|
||||
//@ts-ignore
|
||||
__webpack_require__(/*! ../theme.ts */ "./src/theme.ts");
|
||||
var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
|
||||
var Icon = /** @class */ (function (_super) {
|
||||
__extends(Icon, _super);
|
||||
function Icon() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Icon.prototype.render = function (props) {
|
||||
return (omi_1.h("i", __assign({}, omi_1.extractClass(props, 'm-icon')),
|
||||
return (omi_1.h("i", __assign({}, omi_1.extractClass(props, 'o-icon')),
|
||||
omi_1.h("svg", { viewBox: '0 0 ' + props.view + ' ' + props.view, class: omi_1.classNames({ rotate: props.rotate }), width: props.scale + 'em', height: props.scale + 'em', fill: props.color, "aria-hidden": "true" }, props.paths ? (props.paths.map(function (item) {
|
||||
var attrs = { d: item.path, fill: props.color || 'black' };
|
||||
if (item.color)
|
||||
|
|
@ -294,45 +292,13 @@ var Icon = /** @class */ (function (_super) {
|
|||
rotate: Boolean
|
||||
};
|
||||
Icon = __decorate([
|
||||
omi_1.tag('m-icon')
|
||||
omi_1.tag('o-icon')
|
||||
], Icon);
|
||||
return Icon;
|
||||
}(omi_1.WeElement));
|
||||
exports.default = Icon;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/theme.ts":
|
||||
/*!**********************!*\
|
||||
!*** ./src/theme.ts ***!
|
||||
\**********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
theme();
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
theme();
|
||||
});
|
||||
function theme() {
|
||||
if (document.body && !document.body.style.getPropertyValue('--mdc-theme-primary')) {
|
||||
document.body.style.setProperty('--mdc-theme-primary', '#0072d9');
|
||||
document.body.style.setProperty('--mdc-theme-secondary', '#2170b8');
|
||||
document.body.style.setProperty('--mdc-theme-error', '#f5222d');
|
||||
document.body.style.setProperty('--mdc-theme-surface', '#ffffff');
|
||||
document.body.style.setProperty('--mdc-theme-on-primary', '#ffffff');
|
||||
document.body.style.setProperty('--mdc-theme-on-secondary', '#ffffff');
|
||||
document.body.style.setProperty('--mdc-theme-on-error', '#ffffff');
|
||||
document.body.style.setProperty('--mdc-theme-on-surface', '#000000');
|
||||
document.body.style.setProperty('--mdc-theme-background', '#ffffff');
|
||||
document.body.style.setProperty('--mdc-shape-small-component-radius', '4px');
|
||||
document.body.style.setProperty('--mdc-shape-medium-component-radius', '4px');
|
||||
document.body.style.setProperty('--mdc-shape-large-component-radius', '0px');
|
||||
document.body.style.setProperty('--mdc-typography--font-family', 'Roboto, sans-serif');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "omi":
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -2,12 +2,12 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.m-icon {
|
||||
.o-icon {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.m-icon svg{
|
||||
.o-icon svg {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -34,4 +34,4 @@ i div {
|
|||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
import { tag, WeElement, h, extractClass, classNames } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
|
||||
//@ts-ignore
|
||||
import '../theme.ts'
|
||||
|
||||
interface Props {
|
||||
path?: string,
|
||||
|
|
@ -13,7 +11,7 @@ interface Props {
|
|||
rotate?: boolean
|
||||
}
|
||||
|
||||
@tag('m-icon')
|
||||
@tag('o-icon')
|
||||
export default class Icon extends WeElement<Props>{
|
||||
static css = css
|
||||
|
||||
|
|
@ -33,7 +31,7 @@ export default class Icon extends WeElement<Props>{
|
|||
|
||||
render(props) {
|
||||
return (
|
||||
<i {...extractClass(props, 'm-icon')} >
|
||||
<i {...extractClass(props, 'o-icon')} >
|
||||
<svg
|
||||
viewBox={'0 0 ' + props.view + ' ' + props.view}
|
||||
class={classNames({ rotate: props.rotate })}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"experimentalDecorators": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
"target": "es5",
|
||||
"allowJs": true,
|
||||
"declaration": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue