Separating Vue and React as individual packages (#18)

* Separate file

* Remove react vue folder

* Update react generator

* Update vue generator

* Add generator

* Update README.md

* Update README.md

.gitignore

@@ -2,9 +2,4 @@
 node_modules
 build
 .env
-vue/
-react/
-nataicons-sprite.svg
-nataicons-24x24-sprite.svg
-nataicons-20x20-sprite.svg
 .DS_Store

README.md

@@ -6,7 +6,7 @@
 <h3 align="center">Nataicons</h3>
 
 <p align="center">
-  A fun-themed simple open source icon by the folks at <a href="https://natatoko.com">Natatoko</a>. This icons provide 2 icons variant: 24x24 and 20x20. Practically, this icons are used on our web application, but feel free to use it on your project!
+  A fun-themed simple open source icon by the folks at <a href="https://natatoko.com">Natatoko</a>.
 </p>
 
 ---
@@ -17,9 +17,9 @@
 
 ## Installation
 
-Install with [npm](https://www.npmjs.com/package/nataicons).
+Install with npm
 ```bash
-npm install nataicons --save
+npm install nataicons
 ```
 
 ## Usage
@@ -46,13 +46,18 @@ Include an icon on your page with the following markup:
 
 ### Vue
 
-1. Import the icon components
+1. Install with npm
+```bash
+npm install @nataicons/vue
+```
+
+2. Import the icon components
 
 ```js
 import { AlarmIcon, AlertIcon, NataIcon } from "nataicons/vue"
 ```
 
-2. Use the icon components in your template
+3. Use the icon components in your template
 
 
 ```jsx
@@ -74,13 +79,18 @@ You can set a custom `size` (in pixels) or use the default sizes (24px or 20px).
 
 ### React
 
-1. Import the icon components
+1. Install with npm
+```bash
+npm install @nataicons/react
+```
+
+2. Import the icon components
 
 ```jsx
-import { AlarmIcon, NataIcon } from "nataicons/react"
+import { AlarmIcon, NataIcon } from "@nataicons/react"
 ```
 
-2. Use the icon components in your JSX
+3. Use the icon components in your JSX
 
 ```jsx
 function MyComponent() {

package.json

@@ -8,8 +8,8 @@
     "prepublishOnly": "npm run build",
     "build": "npm run build:icons && npm run build:vue && npm run build:react",
     "build:icons": "node ./scripts/build-icons.js && npm run icons:optimize && npm run icons:sprite-all && npm run icons:sprite-24x24 && npm run icons:sprite-20x20",
-    "build:vue": "rm -rf ./vue && mkdir ./vue/ && node ./scripts/build-vue/index.js && rollup -c rollup.config.js",
-    "build:react": "rm -rf ./react && mkdir ./react && node ./scripts/build-react/index.js && rollup -c rollup.config.react.js",
+    "build:vue": "node ./scripts/build-vue.js && rollup -c rollup.config.js",
+    "build:react": "node ./scripts/build-react.js && rollup -c rollup.config.react.js",
     "icons:get": "figma-assets-generator",
     "icons:sprite-all": "svg-sprite --svg-namespace-classnames false --symbol --symbol-dest . --symbol-sprite nataicons-sprite.svg './icons/./24x24/*.svg' './icons/./20x20/*.svg'",
     "icons:sprite-24x24": "svg-sprite --svg-namespace-classnames false --symbol --symbol-dest . --symbol-sprite nataicons-24x24-sprite.svg './icons/./24x24/*.svg'",
@@ -60,11 +60,11 @@
   },
   "files": [
     "icons",
-    "vue",
-    "react",
     "nataicons-sprite.svg",
     "nataicons-24x24-sprite.svg",
-    "nataicons-20x20-sprite.svg"
+    "nataicons-20x20-sprite.svg",
+    "README.md",
+    "LICENSE"
   ],
   "dependencies": {
     "@babel/runtime": "^7.25.6"

react/AlarmIcon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const AlarmIcon = ({ size = '24', color = 'currentColor', ...props }) => {
+const getSize = () => {
+  if (typeof size === 'string' && size.slice(-1) === 'x') 
+    return size.slice(0, size.length - 1) + 'em';
+  return typeof size === 'number' ? size + 'px' : size;
+};
+
+const updateSvg = (svgString) => {
+  return svgString
+    .replace(/width="\d+"/, 'width="' + getSize() + '"')
+    .replace(/height="\d+"/, 'height="' + getSize() + '"')
+    .replace(/fill="([^"]+)"/g, 'fill="' + color + '"')
+    .replace(/stroke="([^"]+)"/g, 'stroke="' + color + '"');
+};
+
+const svg20 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">   <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M1.793.793a1 1 0 011.414 1.414l-1.5 1.5A1 1 0 01.293 2.293l1.5-1.5zm15 0a1 1 0 011.414 0l1.5 1.5a1 1 0 01-1.414 1.414l-1.5-1.5a1 1 0 010-1.414zM3 10a7 7 0 1114 0 7 7 0 01-14 0zm7-9a9 9 0 100 18 9 9 0 000-18zm1 5a1 1 0 10-2 0v4.032l-2.64 2.2a1 1 0 101.28 1.536l3-2.5A1 1 0 0011 10.5V6z\"/> </svg>";
+const svg24 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">   <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M3.22 1.375a1 1 0 111.56 1.25l-2 2.5a1 1 0 01-1.56-1.25l2-2.5zm16.155-.156a1 1 0 011.406.156l2 2.5a1 1 0 11-1.562 1.25l-2-2.5a1 1 0 01.156-1.406zM4 12a8 8 0 1116 0 8 8 0 01-16 0zm8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 5.5a1 1 0 10-2 0v4.032l-2.64 2.2a1 1 0 101.28 1.536l3-2.5A1 1 0 0013 12V7.5z\"/> </svg>";
+
+const svgContent = size === '20' || size === 20 ? updateSvg(svg20) : updateSvg(svg24);
+
+return React.createElement('svg', {
+  xmlns: "http://www.w3.org/2000/svg",
+  dangerouslySetInnerHTML: { __html: svgContent },
+  width: getSize(),
+  height: getSize(),
+  ...props
+});
+};
+
+export default AlarmIcon;

react/AlignCenterIcon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const AlignCenterIcon = ({ size = '24', color = 'currentColor', ...props }) => {
+const getSize = () => {
+  if (typeof size === 'string' && size.slice(-1) === 'x') 
+    return size.slice(0, size.length - 1) + 'em';
+  return typeof size === 'number' ? size + 'px' : size;
+};
+
+const updateSvg = (svgString) => {
+  return svgString
+    .replace(/width="\d+"/, 'width="' + getSize() + '"')
+    .replace(/height="\d+"/, 'height="' + getSize() + '"')
+    .replace(/fill="([^"]+)"/g, 'fill="' + color + '"')
+    .replace(/stroke="([^"]+)"/g, 'stroke="' + color + '"');
+};
+
+const svg20 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">   <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M18 5a1 1 0 100-2H2a1 1 0 000 2h16zm-4 4a1 1 0 100-2H6a1 1 0 100 2h8zm5 3a1 1 0 01-1 1H2a1 1 0 110-2h16a1 1 0 011 1zm-5 5a1 1 0 100-2H6a1 1 0 100 2h8z\"/> </svg>";
+const svg24 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">   <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M20 7a1 1 0 100-2H4a1 1 0 000 2h16zm-4 4a1 1 0 100-2H8a1 1 0 100 2h8zm5 3a1 1 0 01-1 1H4a1 1 0 110-2h16a1 1 0 011 1zm-5 5a1 1 0 100-2H8a1 1 0 100 2h8z\"/> </svg>";
+
+const svgContent = size === '20' || size === 20 ? updateSvg(svg20) : updateSvg(svg24);
+
+return React.createElement('svg', {
+  xmlns: "http://www.w3.org/2000/svg",
+  dangerouslySetInnerHTML: { __html: svgContent },
+  width: getSize(),
+  height: getSize(),
+  ...props
+});
+};
+
+export default AlignCenterIcon;

react/AlignJustifyIcon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const AlignJustifyIcon = ({ size = '24', color = 'currentColor', ...props }) => {
+const getSize = () => {
+  if (typeof size === 'string' && size.slice(-1) === 'x') 
+    return size.slice(0, size.length - 1) + 'em';
+  return typeof size === 'number' ? size + 'px' : size;
+};
+
+const updateSvg = (svgString) => {
+  return svgString
+    .replace(/width="\d+"/, 'width="' + getSize() + '"')
+    .replace(/height="\d+"/, 'height="' + getSize() + '"')
+    .replace(/fill="([^"]+)"/g, 'fill="' + color + '"')
+    .replace(/stroke="([^"]+)"/g, 'stroke="' + color + '"');
+};
+
+const svg20 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">   <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M18 5a1 1 0 100-2H2a1 1 0 000 2h16zm0 4a1 1 0 100-2H2a1 1 0 100 2h16zm1 3a1 1 0 01-1 1H2a1 1 0 110-2h16a1 1 0 011 1zm-1 5a1 1 0 100-2H2a1 1 0 100 2h16z\"/> </svg>";
+const svg24 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">   <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M20 7a1 1 0 100-2H4a1 1 0 000 2h16zm0 4a1 1 0 100-2H4a1 1 0 100 2h16zm1 3a1 1 0 01-1 1H4a1 1 0 110-2h16a1 1 0 011 1zm-1 5a1 1 0 100-2H4a1 1 0 100 2h16z\"/> </svg>";
+
+const svgContent = size === '20' || size === 20 ? updateSvg(svg20) : updateSvg(svg24);
+
+return React.createElement('svg', {
+  xmlns: "http://www.w3.org/2000/svg",
+  dangerouslySetInnerHTML: { __html: svgContent },
+  width: getSize(),
+  height: getSize(),
+  ...props
+});
+};
+
+export default AlignJustifyIcon;

react/AlignLeftIcon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const AlignLeftIcon = ({ size = '24', color = 'currentColor', ...props }) => {
+const getSize = () => {
+  if (typeof size === 'string' && size.slice(-1) === 'x') 
+    return size.slice(0, size.length - 1) + 'em';
+  return typeof size === 'number' ? size + 'px' : size;
+};
+
+const updateSvg = (svgString) => {
+  return svgString
+    .replace(/width="\d+"/, 'width="' + getSize() + '"')
+    .replace(/height="\d+"/, 'height="' + getSize() + '"')
+    .replace(/fill="([^"]+)"/g, 'fill="' + color + '"')
+    .replace(/stroke="([^"]+)"/g, 'stroke="' + color + '"');
+};
+
+const svg20 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">   <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M18 5a1 1 0 100-2H2a1 1 0 000 2h16zm-8 4a1 1 0 100-2H2a1 1 0 100 2h8zm9 3a1 1 0 01-1 1H2a1 1 0 110-2h16a1 1 0 011 1zm-9 5a1 1 0 100-2H2a1 1 0 100 2h8z\"/> </svg>";
+const svg24 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">   <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M20 7a1 1 0 100-2H4a1 1 0 000 2h16zm-8 4a1 1 0 100-2H4a1 1 0 100 2h8zm9 3a1 1 0 01-1 1H4a1 1 0 110-2h16a1 1 0 011 1zm-9 5a1 1 0 100-2H4a1 1 0 100 2h8z\"/> </svg>";
+
+const svgContent = size === '20' || size === 20 ? updateSvg(svg20) : updateSvg(svg24);
+
+return React.createElement('svg', {
+  xmlns: "http://www.w3.org/2000/svg",
+  dangerouslySetInnerHTML: { __html: svgContent },
+  width: getSize(),
+  height: getSize(),
+  ...props
+});
+};
+
+export default AlignLeftIcon;

react/AlignRightIcon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const AlignRightIcon = ({ size = '24', color = 'currentColor', ...props }) => {
+const getSize = () => {
+  if (typeof size === 'string' && size.slice(-1) === 'x') 
+    return size.slice(0, size.length - 1) + 'em';
+  return typeof size === 'number' ? size + 'px' : size;
+};
+
+const updateSvg = (svgString) => {
+  return svgString
+    .replace(/width="\d+"/, 'width="' + getSize() + '"')
+    .replace(/height="\d+"/, 'height="' + getSize() + '"')
+    .replace(/fill="([^"]+)"/g, 'fill="' + color + '"')
+    .replace(/stroke="([^"]+)"/g, 'stroke="' + color + '"');
+};
+
+const svg20 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">   <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M18 5a1 1 0 100-2H2a1 1 0 000 2h16zm0 4a1 1 0 100-2h-8a1 1 0 100 2h8zm1 3a1 1 0 01-1 1H2a1 1 0 110-2h16a1 1 0 011 1zm-1 5a1 1 0 100-2h-8a1 1 0 100 2h8z\"/> </svg>";
+const svg24 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">   <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M20 7a1 1 0 100-2H4a1 1 0 000 2h16zm0 4a1 1 0 100-2h-8a1 1 0 100 2h8zm1 3a1 1 0 01-1 1H4a1 1 0 110-2h16a1 1 0 011 1zm-1 5a1 1 0 100-2h-8a1 1 0 100 2h8z\"/> </svg>";
+
+const svgContent = size === '20' || size === 20 ? updateSvg(svg20) : updateSvg(svg24);
+
+return React.createElement('svg', {
+  xmlns: "http://www.w3.org/2000/svg",
+  dangerouslySetInnerHTML: { __html: svgContent },
+  width: getSize(),
+  height: getSize(),
+  ...props
+});
+};
+
+export default AlignRightIcon;

react/ArrowBottomLeftIcon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const ArrowBottomLeftIcon = ({ size = '24', color = 'currentColor', ...props }) => {
+const getSize = () => {
+  if (typeof size === 'string' && size.slice(-1) === 'x') 
+    return size.slice(0, size.length - 1) + 'em';
+  return typeof size === 'number' ? size + 'px' : size;
+};
+
+const updateSvg = (svgString) => {
+  return svgString
+    .replace(/width="\d+"/, 'width="' + getSize() + '"')
+    .replace(/height="\d+"/, 'height="' + getSize() + '"')
+    .replace(/fill="([^"]+)"/g, 'fill="' + color + '"')
+    .replace(/stroke="([^"]+)"/g, 'stroke="' + color + '"');
+};
+
+const svg20 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">   <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.657 4.343L4.343 15.657m0 0v-9.9m0 9.9h9.9\"/> </svg>";
+const svg24 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">   <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 6.343L6.343 17.657m0 0h9.9m-9.9 0v-9.9\"/> </svg>";
+
+const svgContent = size === '20' || size === 20 ? updateSvg(svg20) : updateSvg(svg24);
+
+return React.createElement('svg', {
+  xmlns: "http://www.w3.org/2000/svg",
+  dangerouslySetInnerHTML: { __html: svgContent },
+  width: getSize(),
+  height: getSize(),
+  ...props
+});
+};
+
+export default ArrowBottomLeftIcon;

react/ArrowBottomRightIcon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const ArrowBottomRightIcon = ({ size = '24', color = 'currentColor', ...props }) => {
+const getSize = () => {
+  if (typeof size === 'string' && size.slice(-1) === 'x') 
+    return size.slice(0, size.length - 1) + 'em';
+  return typeof size === 'number' ? size + 'px' : size;
+};
+
+const updateSvg = (svgString) => {
+  return svgString
+    .replace(/width="\d+"/, 'width="' + getSize() + '"')
+    .replace(/height="\d+"/, 'height="' + getSize() + '"')
+    .replace(/fill="([^"]+)"/g, 'fill="' + color + '"')
+    .replace(/stroke="([^"]+)"/g, 'stroke="' + color + '"');
+};
+
+const svg20 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">   <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.343 4.343l11.314 11.314m0 0h-9.9m9.9 0v-9.9\"/> </svg>";
+const svg24 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">   <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6.343 6.343l11.314 11.314m0 0v-9.9m0 9.9h-9.9\"/> </svg>";
+
+const svgContent = size === '20' || size === 20 ? updateSvg(svg20) : updateSvg(svg24);
+
+return React.createElement('svg', {
+  xmlns: "http://www.w3.org/2000/svg",
+  dangerouslySetInnerHTML: { __html: svgContent },
+  width: getSize(),
+  height: getSize(),
+  ...props
+});
+};
+
+export default ArrowBottomRightIcon;

react/ArrowDownIcon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const ArrowDownIcon = ({ size = '24', color = 'currentColor', ...props }) => {
+const getSize = () => {
+  if (typeof size === 'string' && size.slice(-1) === 'x') 
+    return size.slice(0, size.length - 1) + 'em';
+  return typeof size === 'number' ? size + 'px' : size;
+};
+
+const updateSvg = (svgString) => {
+  return svgString
+    .replace(/width="\d+"/, 'width="' + getSize() + '"')
+    .replace(/height="\d+"/, 'height="' + getSize() + '"')
+    .replace(/fill="([^"]+)"/g, 'fill="' + color + '"')
+    .replace(/stroke="([^"]+)"/g, 'stroke="' + color + '"');
+};
+
+const svg20 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">   <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 2v16m0 0l-7-7m7 7l7-7\"/> </svg>";
+const svg24 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">   <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m0 0l7-7m-7 7l-7-7\"/> </svg>";
+
+const svgContent = size === '20' || size === 20 ? updateSvg(svg20) : updateSvg(svg24);
+
+return React.createElement('svg', {
+  xmlns: "http://www.w3.org/2000/svg",
+  dangerouslySetInnerHTML: { __html: svgContent },
+  width: getSize(),
+  height: getSize(),
+  ...props
+});
+};
+
+export default ArrowDownIcon;