svg icons => createted @vwjs/webicon monorepo npm package

- stared webicon
- Added Home Icon

To Do
- [ ] Complete Web Icon
- [ ] emoji Icons

apps/docs/next.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   reactStrictMode: true,
   experimental: {
-    transpilePackages: ["ui"],
+    transpilePackages: ["ui", "webicon"],
   },
 };

apps/docs/package.json

@@ -12,7 +12,8 @@
     "next": "13.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "ui": "*"
+    "ui": "*",
+    "webicons": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

apps/docs/pages/index.tsx

@@ -1,4 +1,5 @@
 import { Button } from "ui";
+import { HomeIcon } from "webicon"
 
 export default function Docs() {
   return (

apps/web/next.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   reactStrictMode: true,
   experimental: {
-    transpilePackages: ["ui"],
+    transpilePackages: ["ui", "webicon"],
   },
 };

apps/web/package.json

@@ -12,6 +12,7 @@
     "next": "13.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "webicon": "*",
     "ui": "*"
   },
   "devDependencies": {

apps/web/pages/index.tsx

@@ -1,9 +1,11 @@
 import { Button } from "ui";
+import { HomeIcon } from "webicon"
 
 export default function Web() {
   return (
     <div>
       <h1>Web</h1>
+      <HomeIcon />
       <Button />
     </div>
   );

package.json

@@ -20,6 +20,5 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "dependencies": {},
   "packageManager": "yarn@1.22.19"
-}
+}

packages/webicon/.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+docs

packages/webicon/.eslintrc

@@ -0,0 +1,37 @@
+{
+    "root": true,
+    "extends": [
+      "prettier",
+      "plugin:prettier/recommended",
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint",
+      "prettier",
+      "react",
+      "react-hooks"
+    ],
+    "rules": {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-explicit-any": "off"
+    },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    },
+    "env": {
+      "browser": true,
+      "node": true
+    },
+    "globals": {
+      "JSX": true
+    }
+  }

packages/webicon/.gitignore

@@ -0,0 +1,22 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/webicon/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+    "bracketSpacing": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "tabWidth": 2,
+    "semi": false,
+    "printWidth": 120,
+    "jsxSingleQuote": true,
+    "endOfLine": "auto"
+}

packages/webicon/jestconfig.json

@@ -0,0 +1,15 @@
+{
+    "transform": {
+        "^.+\\.(t|j)sx?$": "ts-jest"
+    },
+    "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+    "moduleFileExtensions": [
+        "ts",
+        "tsx",
+        "js",
+        "jsx",
+        "json",
+        "node"
+    ],
+    "testEnvironment": "jsdom"
+}

packages/webicon/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@vwjs/webicons",
+  "version": "0.0.1",
+  "description": "react icon libray",
+  "main": "./dist/cjs/index.js",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "scripts": {
+    "test": "jest --config jestconfig.json",
+    "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "prettier": "prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\"",
+    "prepare": "npm run build",
+    "build": "yarn build:esm && yarn build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "prepublishOnly": "npm test && npm run prettier && npm run lint"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "react icons",
+    "svg icons"
+  ],
+  "author": "kalana kithmina (kalanakt)",
+  "license": "MIT",
+  "devDependencies": {
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.2.4",
+    "@types/react": "^18.0.26",
+    "@typescript-eslint/eslint-plugin": "^5.45.1",
+    "@typescript-eslint/parser": "^5.45.1",
+    "eslint": "^8.29.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.3.1",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^29.3.1",
+    "prettier": "^2.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-jest": "^29.0.3",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kalanakt/svgicons.git"
+  }
+}

packages/webicon/src/HomeIcon.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { SVGProps, Ref, forwardRef } from 'react'
+
+const HomeIcon = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' width={24} height={24} ref={ref} {...props}>
+    <path fill='none' d='M0 0h24v24H0z' />
+    <path d='M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.222a1 1 0 0 1 1.228 0l8 6.222a1 1 0 0 1 .386.79V20zm-2-1V9.978l-7-5.444-7 5.444V19h14z' />
+  </svg>
+)
+
+const ForwardRef = forwardRef(HomeIcon)
+export default ForwardRef

packages/webicon/src/index.tsx

@@ -0,0 +1,3 @@
+import HomeIcon from './HomeIcon'
+
+export { HomeIcon }

packages/webicon/tests/Icon.test.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import 'jest-canvas-mock'
+
+import { HomeIcon } from '../src'
+
+describe('Common render', () => {
+  it('renders without crashing', () => {
+    render(<HomeIcon />)
+  })
+})

packages/webicon/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "include": ["src"],
+    "exclude": [
+      "dist",
+      "node_modules"
+    ],
+    "compilerOptions": {
+      "module": "esnext",
+      "lib": ["dom", "esnext"],
+      "importHelpers": true,
+      "declaration": true,
+      "sourceMap": true,
+      "rootDir": "./src",
+      "outDir": "./dist/esm",
+      "strict": true,
+      "noImplicitReturns": true,
+      "noFallthroughCasesInSwitch": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true,
+      "moduleResolution": "node",
+      "jsx": "react",
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "forceConsistentCasingInFileNames": true,
+    }
+  }