Merge pull request #54 from nota/react-component

SVGからReact Componentを生成してパッケージに含める

.gitignore

@@ -80,3 +80,6 @@ typings/
 .dynamodb/
 
 .DS_Store
+
+dist/
+src/

.npmignore

@@ -1 +1,3 @@
 example/
+src/
+generate-react-component.mjs

README.md

@@ -7,7 +7,26 @@
 * Please get svg icon set via npm.
 * `npm install @notainc/kamon`
 
-## Useage
+## Usage
+
+### React
+
+```js
+import { Star, StarFill } from '@notainc/kamon/react';
+/** Or you can use separated import
+ * import { Star } from '@notainc/kamon/react/Star';
+ * import { StarFill } from '@notainc/kamon/react/StarFill';
+ **/
+function Like () {
+  const [liked, setLiked] = useState(false);
+  return <button onClick={setLiked(prev => !prev)}>
+    {liked ? <StarFill /> : <Star />} Like
+  </button>
+}
+```
+
+### SVG
+
 * For web applications, we recommend to use SVG Sprites.
 * We are following this process in /example.
 1. Generate the SVG Sprites file from /svg. (Using [svg-sprites](https://www.npmjs.com/package/svg-sprite) library)
@@ -38,6 +57,12 @@
  }
 ```
 
+## Development
+
+- Clone this repository.
+- `npm install`
+- `npm run build`
+
 ## License
 #### Code
 * Copyright (c) 2019 Nota Inc.

generate-react-component.mjs

@@ -0,0 +1,34 @@
+import path from 'path';
+import {readdir, readFile, writeFile} from 'fs/promises';
+import pascalcase from 'pascalcase';
+import { optimize } from 'svgo'
+
+const __dirname = import.meta.dirname
+
+const svgs = (await readdir(path.join(__dirname, './svg'))).filter(file => file.endsWith('.svg'));
+
+await Promise.all((svgs).map(async (file) => {
+  const svg = await readFile(path.join(__dirname, './svg', file), 'utf8');
+  const optimizedSvg = optimize(svg, {
+    plugins: [
+      'removeTitle',
+      {name: 'removeAttrs', params: {attrs: 'fill'}},]
+  }).data;
+  const name = path.basename(file, '.svg');
+  await writeFile(
+    path.join(__dirname, './src/react', `${pascalcase(name)}.tsx`),
+    `import React from 'react';
+     function ${pascalcase(name)} (props: React.HTMLProps<SVGSVGElement>): React.ReactElement {
+      return (
+        ${optimizedSvg.replace(/<svg(.*?)>/, `<svg $1 {...props}>`)}
+      );
+     }
+     export {${pascalcase(name)}};
+    `
+  );
+}));
+
+await writeFile(path.join(__dirname, './src/react/index.ts'), svgs.map(file => {
+  const name = path.basename(file, '.svg');
+  return `export {${pascalcase(name)}} from './${pascalcase(name)}';`
+}).join('\n'));