(refactor): port to typescript

.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
-}

.eslintrc

@@ -1,81 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "commonjs": true,
-    "es6": true,
-    "jest": true,
-    "node": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ],
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "parser": "babel-eslint",
-  "plugins": ["jsx-a11y", "react"],
-  "rules": {
-    "semi": "error",
-    "no-array-constructor": "warn",
-    "react/jsx-closing-bracket-location": 1,
-    "react/jsx-curly-spacing": "warn",
-    "react/jsx-equals-spacing": ["warn", "never"],
-    "react/jsx-first-prop-new-line": ["warn", "multiline"],
-    "react/jsx-handler-names": "warn",
-    "react/jsx-indent": ["warn", 2],
-    "react/jsx-indent-props": ["warn", 2],
-    "react/jsx-key": "warn",
-    "react/jsx-max-props-per-line": "warn",
-    "react/jsx-no-bind": ["warn", {"allowArrowFunctions": true}],
-    "react/jsx-no-comment-textnodes": "warn",
-    "react/jsx-no-duplicate-props": ["warn", { "ignoreCase": true }],
-    "react/jsx-no-undef": "warn",
-    "react/jsx-pascal-case": ["warn", {
-      "allowAllCaps": true,
-      "ignore": []
-    }],
-    "react/jsx-sort-props": 0,
-    "react/jsx-tag-spacing": "warn",
-    "react/jsx-uses-react": "warn",
-    "react/jsx-uses-vars": "warn",
-    "react/jsx-wrap-multilines": "warn",
-    "react/no-deprecated": "warn",
-    "react/no-direct-mutation-state": "warn",
-    "react/no-is-mounted": "warn",
-    "react/no-unused-prop-types": "warn",
-    "react/prefer-es6-class": "warn",
-    "react/prefer-stateless-function": 0,
-    "react/prop-types": "warn",
-    "react/react-in-jsx-scope": "warn",
-    "react/require-render-return": "warn",
-    "react/self-closing-comp": "warn",
-    "react/sort-comp": "warn",
-    "react/sort-prop-types": 0,
-    "react/style-prop-object": "warn",
-    "react/void-dom-elements-no-children": "warn",
-    "jsx-a11y/aria-role": "warn",
-    "jsx-a11y/no-access-key": "warn"
-  },
-  "settings": {
-    "import/ignore": [
-      "node_modules",
-      "\\.(json|css|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$",
-    ],
-    "import/extensions": [".js"],
-    "import/resolver": {
-      "node": {
-        "extensions": [".js", ".json"]
-      }
-    },
-    "react": {
-      "createClass": "createReactClass",
-      "pragma": "React",
-      "version": "detect"
-    }
-  }
-}

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "indent": "off",
+        "@typescript-eslint/indent": ["error", 2],
+        "semi": ["error", "never"],
+        "@typescript-eslint/semi": "off",
+        "no-unexpected-multiline": "error"
+    }
+}

.gitignore

@@ -1,4 +1,3 @@
-.DS_Store
+/lib
-build
 node_modules
 *.log

.npmignore

@@ -1,2 +1 @@
-.babelrc
 src

package.json

@@ -1,46 +1,38 @@
 {
-  "name": "feather-icons-react",
+  "name": "feather-icons-ts-react",
-  "version": "0.5.0",
+  "version": "0.1.0",
-  "description": "Feather Icons as a React component.",
+  "description": "Feather Icons as a React Typescript component.",
-  "main": "build/index.js",
+  "main": "lib/index.js",
+  "files": ["lib/**/*"],
   "scripts": {
-    "test": "npm run test",
+    "build" : "tsc"
-    "build": "npm run lint && babel src -d build --copy-files",
-    "lint": "eslint src",
-    "lint:watch": "esw -w lib/**",
-    "prepare": "npm run build"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ianmiller347/feather-icons-react.git"
+    "url": "git+https://github.com/maks-it/feather-icons-ts-react.git"
   },
   "keywords": [
     "feather",
     "icons",
     "react",
-    "svg"
+    "svg",
+    "ts",
+    "typescript"
   ],
-  "author": "Ian J. Miller",
+  "author": "Ian J. Miller TS Port by Maksym Sadovnychyy",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/ianmiller347/feather-icons-react/issues"
+    "url": "https://github.com/maks-it/feather-icons-ts-react/issues"
   },
-  "homepage": "https://github.com/ianmiller347/feather-icons-react#readme",
+  "homepage": "https://github.com/maks-it/feather-icons-ts-react/#readme",
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
+    "@types/react": "18.0.5",
-    "@babel/core": "^7.12.10",
+    "@typescript-eslint/parser": "^5.19.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
+    "eslint": "^8.13.0",
-    "@babel/preset-env": "^7.3.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "@babel/preset-react": "^7.0.0",
+    "react": "^18.0.0",
-    "babel-eslint": "^10.0.3",
+    "typescript": "^4.6.3"
-    "eslint": "^6.8.0",
+    
-    "eslint-plugin-import": "^2.20.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-watch": "^6.0.1",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
   },
   "dependencies": {}
 }

src/FeatherIcon.tsx

@@ -1,6 +1,13 @@
-import React from 'react';
+import React, { FC } from 'react'
-import PropTypes from 'prop-types';
+import { IconInner } from './IconInner'
-import IconInner from './IconInner';
+
+interface IFeatherIcon {
+  icon: string,
+  size: string | number,
+  className: string,
+  fill: string,
+  otherProps: any
+}
 
 /**
  * Feather icon
@@ -8,15 +15,12 @@ import IconInner from './IconInner';
  * @param {icon} icon name that matches from feathericons
  * @returns FeatherIcon react component
  */
-const FeatherIcon = ({
+const FeatherIcon : FC<IFeatherIcon> = (props : IFeatherIcon) => {
-  icon,
+
-  size = 24,
+  const { icon, size = 24, className = '', fill = 'none', otherProps } = props
-  className = '',
+
-  fill = 'none',
-  ...otherProps
-}) => {
   if (!icon) {
-    return null;
+    return null
   }
 
   return (
@@ -34,14 +38,9 @@ const FeatherIcon = ({
     >
       <IconInner icon={icon} />
     </svg>
-  );
+  )
-};
+}
 
-FeatherIcon.propTypes = {
+export { 
-  icon: PropTypes.string.isRequired, // the icon name that matches exactly from feathericons
+  FeatherIcon
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+}
-  className: PropTypes.string,
-  fill: PropTypes.string,
-};
-
-export default FeatherIcon;

src/IconInner.tsx

@@ -1,29 +1,37 @@
-import React from 'react';
+import React, { FC } from 'react'
-import PropTypes from 'prop-types';
 // for now this icons json is generated via the build script from latest feather
 // TODO: automatically generate this JSON via this repo's build script
-import icons from './icons.json';
+import icons from './icons.json'
 
-const createMarkup = (markup) => {
+const createMarkup = (markup: string) => {
   // we dont sanitize markup 
   // since icons.json is maintained within the package before build
-  return { __html: markup };
+  return { __html: markup }
-};
+}
 
-const IconInner = ({ icon }) => {
+interface IIconInner {
+  icon: string
+}
+
+const IconInner : FC<IIconInner> = (props : IIconInner) => {
+  const { icon } = props
+
+  
   // icons are based on generated icons.json from feather lib
-  const iconMarkup = icons[icon];
+  interface IIcons {
+    [key: string]: string
+  }
+
+  const iconMarkup = (icons as IIcons)[icon]
 
   if (iconMarkup) {
     // i didnt want to use dangerouslySetInnerHTML
     // but this way I can just use the JSON to spit out SVG.
-    return <g dangerouslySetInnerHTML={createMarkup(iconMarkup)} />;
+    return <g dangerouslySetInnerHTML={createMarkup(iconMarkup)} />
   }
-  return null;
+  return null
-};
+}
 
-IconInner.propTypes = {
+export {
-  icon: PropTypes.string.isRequired
+  IconInner
-};
+}
-
-export default IconInner;

src/index.js

@@ -1 +0,0 @@
-export { default } from './FeatherIcon';

src/index.tsx

@@ -0,0 +1 @@
+export { FeatherIcon } from './FeatherIcon'

tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "lib": [
+      "es2015",
+      "dom"
+    ],
+    "skipLibCheck": false,
+    "noFallthroughCasesInSwitch": true,
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
+    "declaration": true,
+    "outDir": "./lib",
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules", 
+    "**/__tests__/*"
+  ]
+}