Merge pull request #1 from Rinma/master

Refactored React OpenWebIcons with Typescript
pfefferle · Apr 3, 2017 · 737fc32 · 737fc32
2 parents 456859a + 3146eee
commit 737fc32
Show file tree

Hide file tree

Showing 16 changed files with 3,950 additions and 71 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Marvin Dalheimer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -11,12 +11,28 @@ npm install --save react-openwebicons
 ## Usage
 
 ```JavaScript
+//index.jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
 import OpenWebIcon from 'react-openwebicons';
 
-ReactDOM.render(
-  <OpenWebIcon name="openid" />,
-  document.body.appendChild(document.createElement('div'))
-);
+ReactDOM.render(<OpenWebIcon name="openwebicons-epub" size="248px" colored={true}/>, document.getElementById("app"));
+ReactDOM.render(<OpenWebIcon name="openwebicons-epub" size="248px" colored="#990000"/>, document.getElementById("app2"));
+ReactDOM.render(<OpenWebIcon name="openwebicons-epub" size="248px"/>, document.getElementById("app3"));
+ReactDOM.render(<OpenWebIcon name="openwebicons-epub"/>, document.getElementById("app4"));
 ```
+
+For more informations have a look at the example folder.
+
+## How to develop
+
+- npm/yarn install
+- npm run build
+- npm link
+- cd example 
+- npm/yarn install
+- npm link "react-openwebicons"
+- webpack
+- open index.html in web browser
+
+To change the icon, size or color adjust the values in the index.tsx in the example folder and run webpack again
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,40 @@
+# Created by .ignore support plugin (hsz.mobi)
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pids
+*.pid
+*.seed
+*.pid.lock
+lib-cov
+coverage
+.nyc_output
+.grunt
+bower_components
+.lock-wscript
+build/Release
+node_modules/
+jspm_packages/
+typings/
+.npm
+.eslintcache
+.node_repl_history
+*.tgz
+.yarn-integrity
+.env
+.idea/
+*.iws
+/out/
+.idea_modules/
+atlassian-ide-plugin.xml
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+*.js
+*.map
+
+!webpack.config.js
diff --git a/example/index.css b/example/index.css
@@ -0,0 +1,10 @@
+@font-face {
+    font-family: 'OpenWeb Icons';
+    src: url('node_modules/openwebicons/font/openwebicons.eot');
+    src: url('node_modules/openwebicons/font/openwebicons.eot?#iefix') format('embedded-opentype'),
+    url('node_modules/openwebicons/font/openwebicons.woff') format('woff'),
+    url('node_modules/openwebicons/font/openwebicons.ttf') format('truetype'),
+    url('node_modules/openwebicons/font/openwebicons.svg#OpenWebIconsRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Test</title>
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/openwebicons/1.4.2/css/openwebicons.min.css"/>
+</head>
+<body>
+    <div id="app"></div>
+    <div id="app2"></div>
+    <div id="app3"></div>
+    <div id="app4"></div>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/example/index.tsx b/example/index.tsx
@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import OpenWebIcon from "react-openwebicons";
+
+ReactDOM.render(<OpenWebIcon name="openwebicons-epub" size="248px" colored={true}/>, document.getElementById("app"));
+ReactDOM.render(<OpenWebIcon name="openwebicons-epub" size="248px" colored="#990000"/>, document.getElementById("app2"));
+ReactDOM.render(<OpenWebIcon name="openwebicons-epub" size="248px"/>, document.getElementById("app3"));
+ReactDOM.render(<OpenWebIcon name="openwebicons-epub"/>, document.getElementById("app4"));
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "TestIcons",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "openwebicons": "^1.4.2"
+  },
+  "devDependencies": {
+    "@types/react": "^15.0.10",
+    "@types/react-dom": "^0.14.23",
+    "ts-loader": "^2.0.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1"
+  }
+}
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "sourceMap": true,
+    "jsx": "react",
+    "outDir": ".",
+    "allowJs": true
+  },
+  "exclude": [
+    "node_modules"
+  ],
+  "files": [
+    "node_modules/react-openwebicons/lib/@types/react-openwebicons.d.ts",
+    "index.tsx"
+  ]
+}
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+    entry: "./index.tsx",
+    output: {
+        path: "./",
+        filename: "index.js"
+    },
+    module: {
+        rules:  [
+            {
+                test: /\.tsx?$/,
+                loader: "ts-loader",
+                exclude: "node_modules/"
+            }
+        ]
+    },
+    resolve: {
+        extensions: [".tsx", ".ts", ".jsx", ".js"]
+    }
+};