From abfd50a7bf0da1ef25568ce8f7fa63a9aa292308 Mon Sep 17 00:00:00 2001 From: HeskeyBaozi Date: Fri, 24 Aug 2018 19:47:07 +0800 Subject: [PATCH] use component --- components/icon/demo/assets/ant-design.svg | 43 ------------------ components/icon/demo/assets/heart.svg | 9 ---- components/icon/demo/custom.md | 33 ++++++++++---- components/select/index.tsx | 4 +- package.json | 1 - site/bisheng.config.js | 51 ---------------------- 6 files changed, 26 insertions(+), 115 deletions(-) delete mode 100644 components/icon/demo/assets/ant-design.svg delete mode 100644 components/icon/demo/assets/heart.svg diff --git a/components/icon/demo/assets/ant-design.svg b/components/icon/demo/assets/ant-design.svg deleted file mode 100644 index e9f8c2a9d7..0000000000 --- a/components/icon/demo/assets/ant-design.svg +++ /dev/null @@ -1,43 +0,0 @@ - - - - Group 28 Copy 5 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/components/icon/demo/assets/heart.svg b/components/icon/demo/assets/heart.svg deleted file mode 100644 index 6eb6f76a4b..0000000000 --- a/components/icon/demo/assets/heart.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - diff --git a/components/icon/demo/custom.md b/components/icon/demo/custom.md index fc4d28e791..10d954fd8f 100644 --- a/components/icon/demo/custom.md +++ b/components/icon/demo/custom.md @@ -7,31 +7,46 @@ title: ## zh-CN -利用 `Icon` 组件封装一个可复用的自定义图标。可以通过 `component` 属性传入一个组件来渲染最终的图标，以满足特定的需求。这个例子中使用了 `@svgr/webpack` 来将 `svg` 图标转化为 `React` 组件。 +利用 `Icon` 组件封装一个可复用的自定义图标。可以通过 `component` 属性传入一个组件来渲染最终的图标，以满足特定的需求。 ## en-US -Create a reusable React component by using ``. The property `component` takes a React component that renders to `svg` element. This demo shows how to convert `svg` icon to a React component by using `webpack` and loader `@svgr/webpack`. +Create a reusable React component by using ``. The property `component` takes a React component that renders to `svg` element. ````jsx import { Icon } from 'antd'; -import HeartSvg from './assets/heart.svg'; -import AntDesignSvg from './assets/ant-design.svg'; -// use webpack loader `@svgr/webpack`, -// which converts the `*.svg` file into a React component. + +const HeartSvg = () => ( + + + +); + +const PandaSvg = () => ( + + + + + + + + + + +); const HeartIcon = props => ( ); -const AntDesignIcon = props => ( - +const PandaIcon = props => ( + ); ReactDOM.render(
- +
, mountNode ); diff --git a/components/select/index.tsx b/components/select/index.tsx index 36a199bb6c..e871a87945 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -182,14 +182,14 @@ export default class Select extends React.Component { return ( ); diff --git a/package.json b/package.json index 83b1887955..66616d014a 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,6 @@ }, "devDependencies": { "@babel/types": "7.0.0-beta.44", - "@svgr/webpack": "^2.2.0", "@types/classnames": "^2.2.6", "@types/prop-types": "^15.5.4", "@types/react": "^16.0.0", diff --git a/site/bisheng.config.js b/site/bisheng.config.js index 524f28f894..98f7a91c25 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -24,23 +24,6 @@ function alertBabelConfig(rules) { }); } -function getBabelConfig(rules) { - let config = null; - rules.forEach((rule) => { - if (config) { - return; - } - if (rule.loader && rule.loader === 'babel-loader') { - config = rule.options; - return; - } - if (rule.use) { - alertBabelConfig(rule.use); - } - }); - return config; -} - function usePrettyWebpackBar(config) { // remove old progress plugin. config.plugins = config.plugins @@ -147,40 +130,6 @@ module.exports = { alertBabelConfig(config.module.rules); usePrettyWebpackBar(config); - const babelConfig = getBabelConfig(config.module.rules); - if (babelConfig) { - config.module.rules = config.module.rules.filter((rule) => { - return rule.test.toString() !== /\.svg(\?v=\d+\.\d+\.\d+)?$/.toString(); - }); - config.module.rules.push( - { - test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, - issuer: { - test: /\.md$/, - }, - use: [ - { - loader: 'babel-loader', - options: babelConfig, - }, - { - loader: '@svgr/webpack', - options: { - babel: false, - icon: true, - }, - }, - ], - }, - { - test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, - issuer: { - test: /\.css$/, - }, - loader: 'url-loader?limit=10000&mimetype=image/svg+xml', - } - ); - } config.plugins.push( new CSSSplitWebpackPlugin({ size: 4000 }), new OfflinePlugin({