build: embedding icons

package.json

@@ -5,11 +5,11 @@
  "scripts": {
  "prepare": "husky install",
  "preinstall": "npx only-allow pnpm",
- "build": "pnpm website build",
+ "build": "pnpm icons build && pnpm website build",
  "build:types": "pnpm --filter @bangumi/types build",
  "design": "pnpm --filter=@bangumi/design",
  "design:doc": "pnpm design storybook",
- "design:build-doc": "pnpm design build-storybook",
+ "design:build-doc": "pnpm icons build && pnpm design build-storybook",
  "dev": "pnpm dev:csr",
  "dev:csr": "pnpm website dev",
  "dev:ssr": "pnpm server dev",
@@ -20,8 +20,9 @@
  "prettier": "prettier --write --list-different ./",
  "prettier:check": "prettier --list-different ./",
  "server": "pnpm --filter=@bangumi/server",
- "test": "jest",
+ "test": "pnpm icons build && jest",
  "website": "pnpm --filter=@bangumi/website",
+ "icons": "pnpm --filter=@bangumi/icons",
  "lint-staged": "lint-staged",
  "type-check": "tsc --noEmit"
  },

packages/icons/index.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Story, ComponentMeta } from '@storybook/react';
-import * as Icons from '.';
+import * as Icons from './dist';
 
 type IComponent = React.FC<
  React.SVGProps<SVGSVGElement> & {
@@ -15,11 +15,11 @@ const componentMeta: ComponentMeta<IComponent> = {
  (story) => (
  <div
  style={{
- display: 'flex',
- alignItems: 'center',
- flex: 'auto',
- flexWrap: 'wrap',
- margin: '0 10rem',
+ display: 'grid',
+ gridTemplateColumns: 'repeat(auto-fill,minmax(8rem,1fr))',
+ gap: '2rem',
+ maxWidth: '80rem',
+ margin: 'auto',
  }}
  >
  {story()}
@@ -52,8 +52,17 @@ const Template: Story<{ height: number; width: number; style: React.CSSPropertie
  {Object.keys(Icons).map((iconName) => {
  const Icon = (Icons as any)[iconName] as IComponent;
  return (
- <div key={iconName} style={{ textAlign: 'center', width: 120 }}>
- <p>{iconName}</p>
+ <div
+ key={iconName}
+ style={{
+ textAlign: 'center',
+ height: 100,
+ border: 'solid 2px #dedede',
+ borderRadius: '5px',
+ padding: '1rem',
+ }}
+ >
+ <p style={{ paddingBottom: '1.5rem', fontWeight: '600' }}>{iconName}</p>
  <Icon height={height} width={width} style={style} />
  </div>
  );

packages/icons/package.json

@@ -2,8 +2,12 @@
  "name": "@bangumi/icons",
  "version": "0.0.0",
  "private": true,
- "main": "index.tsx",
+ "main": "./dist/index.js",
+ "scripts": {
+ "build": "node scripts/build.js"
+ },
  "dependencies": {
+ "@svgr/core": "^6.5.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
  },

packages/icons/scripts/build.js

@@ -0,0 +1,48 @@
+const { readdir, readFile, writeFile, mkdir, access, constants } = require('fs/promises');
+const { resolve, join } = require('path');
+const { transform } = require('@svgr/core');
+const { rmSync } = require('fs');
+
+const OUT_DIR = resolve('./dist');
+const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
+
+async function main() {
+ try {
+ await access(OUT_DIR, constants.F_OK);
+ rmSync(OUT_DIR, { force: true, recursive: true });
+ } catch (error) {}
+
+ await mkdir(OUT_DIR);
+
+ try {
+ const icons = await readdir('./assets/');
+ let indexContent = '';
+
+ for (const icon of icons) {
+ const [filename] = icon.split('.');
+ const defaultName = filename.split('-').map(capitalize).join('');
+ const svg = (await readFile(resolve('./assets', icon))).toString();
+
+ const svgComponents = await transform(svg);
+ const svgComponentsDts = `import * as React from 'react';
+declare function ${defaultName}(props: React.ComponentProps<'svg'>): JSX.Element;
+export default ${defaultName};
+`;
+ indexContent += `export { default as ${defaultName} } from "./${filename}.jsx"\n`;
+
+ // create jsx
+ await writeFile(join(OUT_DIR, `${filename}.jsx`), svgComponents);
+ await writeFile(join(OUT_DIR, `${filename}.d.ts`), svgComponentsDts);
+ }
+
+ // export all svg
+ await writeFile(join(OUT_DIR, 'index.js'), indexContent, { encoding: 'utf-8' });
+ await writeFile(join(OUT_DIR, 'index.d.ts'), indexContent, { encoding: 'utf-8' });
+ } catch (error) {
+ console.error(error);
+ }
+}
+
+main().catch(e => {
+ throw e;
+});