-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(web-components): add icons for web components (#95)
* feat(web-components): web components icon complete🎉 * feat(web-components): web components icon complete🎉 * feat(icon): add tdesign-icons-web-components * feat(icon): add tdesign-icons-web-components * feat(icon): add tdesign-icons-web-components * chore: fix typo * feat(icon): add tdesign-icons-web-components * feat(web-components): fix README.md --------- Co-authored-by: wū yāng <[email protected]>
- Loading branch information
Showing
29 changed files
with
13,331 additions
and
9,180 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| .DS_Store | ||
|
|
||
| # auto generated icons | ||
| src/components/*.tsx | ||
| src/manifest.ts | ||
| src/icons.ts | ||
| src/global-config.ts | ||
| src/svg-sprite/svg-icon.ts | ||
| src/iconfont/font-icon.json | ||
| src/iconfont/t.* | ||
| src/iconfont/index.css | ||
|
|
||
| # build | ||
| lib/ | ||
| dist/ | ||
| esm/ | ||
| es/ | ||
|
|
||
| # yarn | ||
| yarn-error.log | ||
|
|
||
| # eslint | ||
| .eslintcache |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| gulp/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| # TDesign Icons for Web Components | ||
|
|
||
| ## 安装 | ||
|
|
||
| - `npm i tdesign-icons-web-components` | ||
|
|
||
| ## 使用 | ||
|
|
||
| ```js | ||
| // svgsprite | ||
| import 'tdesign-icons-web-components' | ||
|
|
||
| <t-icon name="add"></t-icon> | ||
|
|
||
| // iconfont | ||
| import 'tdesign-icons-web-components/esm/iconfont/index.css' | ||
| import 'tdesign-icons-web-components/esm/iconfont' | ||
|
|
||
| <t-icon-font name="add"></t-icon-font> | ||
|
|
||
| // single icon | ||
| import 'tdesign-icons-web-components/esm/components/add' | ||
|
|
||
| <t-icon-add></t-icon-add> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| module.exports = { | ||
| presets: ['@babel/preset-env'], | ||
| plugins: ['@babel/plugin-transform-runtime'], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { src } from 'gulp'; | ||
|
|
||
| import path from 'path'; | ||
| import fs from 'fs'; | ||
| import { svgToElement, SvgToElementOptions } from '../../../gulp/svg-info-check'; | ||
| import { svgo, SVGOConfig } from '../../../gulp/svgo'; | ||
| import { useTemplate } from '../../../gulp/use-template'; | ||
| import vnodeConvert from './vnode-convert'; | ||
|
|
||
| const iconGlob = path.resolve(__dirname, '../../../svg/*.svg'); | ||
| const iconDir = path.resolve(__dirname, '../../../svg'); | ||
| const targetDir = path.resolve(__dirname, '../src/svg-sprite/'); | ||
|
|
||
| interface GenerateIconOptions { | ||
| options?: SvgToElementOptions; | ||
| config?: SVGOConfig; | ||
| } | ||
|
|
||
| const template = fs.readFileSync(path.resolve(__dirname, 'template/iconJson.ts'), 'utf-8'); | ||
|
|
||
| const iconsJson:Record<string, string> = {}; | ||
|
|
||
| export const generateIconsJson = ({ | ||
| config, options, | ||
| }: GenerateIconOptions) => function generateIcons() { | ||
| return src(iconGlob, { cwd: iconDir }) | ||
| .pipe(svgo(config)) | ||
| .pipe(svgToElement(options)) | ||
| .pipe(useTemplate(({ name, element }: { name: string; element: string }) => { | ||
| const ele = JSON.stringify(vnodeConvert(JSON.parse(element))); | ||
| iconsJson[name] = ele; | ||
| return JSON.stringify(iconsJson); | ||
| })) | ||
| .on('end', () => { | ||
| const iconJson = template.replace(/\$SVGJSON/g, JSON.stringify(iconsJson, undefined, 2)); | ||
| fs.writeFileSync(path.resolve(targetDir, 'svg-icon.ts'), iconJson); | ||
| }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { parallel, series } from 'gulp'; | ||
|
|
||
| import path from 'path'; | ||
| import { generateEntry } from '../../../gulp/generate-entry'; | ||
| import { generateManifest } from '../../../gulp/generate-manifest'; | ||
| import { generateTypeMap } from '../../../gulp/generate-type-map'; | ||
|
|
||
| import { generateIcons } from '../../../gulp/generate-icons'; | ||
| import { clearDir } from '../../../gulp/clean-dir'; | ||
| import { generateIconFontJson } from '../../../gulp/generate-icon-font'; | ||
|
|
||
| import { wcGetIconFileContent } from './wc-use-template'; | ||
| import { generateIconsJson } from './generate-icons-json'; | ||
|
|
||
| const targetDir = path.resolve(__dirname, '../src/iconfont/'); | ||
|
|
||
| export function wcTask(source: string[]) { | ||
| return series( | ||
| clearDir(['packages/web-components/src/components']), | ||
|
|
||
| parallel( | ||
| generateIcons({ | ||
| from: source, | ||
| to: 'packages/web-components/src/components', | ||
| iconGenerator: wcGetIconFileContent, | ||
| options: { | ||
| replaceColor: true, | ||
| }, | ||
| }), | ||
|
|
||
| generateIconsJson({ | ||
| options: { | ||
| replaceColor: true, | ||
| }, | ||
| }), | ||
|
|
||
| generateManifest({ | ||
| from: source, | ||
| to: 'packages/web-components/src', | ||
| }), | ||
| generateTypeMap({ | ||
| from: source, | ||
| to: 'packages/web-components/src', | ||
| type: 'web-components', | ||
| }), | ||
| ), | ||
|
|
||
| generateEntry({ | ||
| from: 'packages/web-components/src/components/*', | ||
| to: 'packages/web-components/src', | ||
| }), | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| // @ts-nocheck | ||
| // This file is generated automatically by `useTemplate.ts`. DO NOT EDIT IT. | ||
|
|
||
| import { tag } from 'omi'; | ||
| import { IconBase, IconProps } from '../icon'; | ||
|
|
||
| const element = $ELEMENT; | ||
|
|
||
| @tag('$ICON_TAG_NAME') | ||
| export default class $ICON_NAME extends IconBase<IconProps> { | ||
| static icon = element; | ||
| constructor() { | ||
| super(); | ||
| this.props = { | ||
| ...this.props, | ||
| id: '$KEY', | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // @ts-ignore | ||
| export default $SVGJSON; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import type { VNode } from 'omi'; | ||
| import type { IconElement } from '../../../gulp/svg-info-check'; | ||
|
|
||
| export default function vnodeConvert(el: IconElement) { | ||
| const omiNode:VNode = { | ||
| attributes: el.attrs, | ||
| nodeName: el.tag, | ||
| children: [], | ||
| }; | ||
| if (el?.children && el.children?.length > 0) { | ||
| omiNode.children = el.children.map(vnodeConvert); | ||
| } | ||
|
|
||
| return omiNode; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import path from 'path'; | ||
| import fs from 'fs'; | ||
|
|
||
| import { upperCamelCase } from '../../../gulp/util'; | ||
| import vnodeConvert from './vnode-convert'; | ||
|
|
||
| const template = fs.readFileSync(path.resolve(__dirname, 'template/icon.tsx'), 'utf-8'); | ||
|
|
||
| export function wcGetIconFileContent({ name, element }: { name: string; element: string }): string { | ||
| const ele = JSON.stringify(vnodeConvert(JSON.parse(element))); | ||
|
|
||
| return template | ||
| .replace(/\$ICON_TAG_NAME/g, `t-icon-${name.toLocaleLowerCase()}`) | ||
| .replace(/\$ICON_NAME/g, `${upperCamelCase(name)}Icon`) | ||
| .replace(/\$ELEMENT/g, ele) | ||
| .replace(/\$KEY/g, name); | ||
| } |
Oops, something went wrong.