feat: allow to transform SVG component name (#55)

* build: add `@svgr/babel-plugin-transform-svg-component` dependency

* feat!: provide SVG component name transformer to SVG plugin

* test: add tests for SVG component name transformations

* docs: update `README.md`

* chore: add changesets

.changeset/long-cows-give.md

@@ -0,0 +1,39 @@
+---
+'@tabula/forge': minor
+---
+
+added support of transformation of SVG component name with `svgrComponentName` option.
+
+By default, SVGR uses `Svg<CamelCaseFileName>` name for components. You can override this behaviour through
+`svgrComponentName` options, which should be function of format `(svgrName: string) => string`.
+
+Example:
+
+```js
+export default {
+  // ...
+  svgrComponentName(name) {
+    return `Ui${name.slice(3)}Icon`;
+  },
+  // ...
+};
+```
+
+If you have a file `column.svg` then component name is `SvgColumn` by default. But with config from about the name
+will be `UiColumnIcon`.
+
+If you use memoization it looks like:
+
+```js
+import { memo } from 'react';
+
+const UiColumnIcon = (props) => {
+  // ...
+};
+
+const Memo = memo(UiColumnIcon);
+
+export { Memo as ReactComponent };
+```
+
+This option doesn't affect named exports.

README.md

@@ -188,6 +188,8 @@ We resolve option in following order:
 
 You can look at the [JSON Schema](https://github.com/ReTable/forge/blob/main/schemas/forgerc.json) for configuration file.
 
+Not all options are available through static files. For example, `svgrComponentName` is available only in JS/TS files.
+
 ## Entries
 
 By default, the `forge` looking for `<packageRoot>/src/index.tsx` or `<packageRoot/src/index.ts` file, and bundles it
@@ -361,6 +363,42 @@ import iconUrl, { ReactComponent as IconUrl } from './icon.svg';
 
 An SVG file already exports React component as `ReactComponent`.
 
+#### SVGR Component Name
+
+By default, SVGR uses `Svg<CamelCaseFileName>` name for components. You can override this behaviour through
+`svgrComponentName` options, which should be function of format `(svgrName: string) => string`.
+
+Example:
+
+```js
+export default {
+  // ...
+  svgrComponentName(name) {
+    return `Ui${name.slice(3)}Icon`;
+  },
+  // ...
+};
+```
+
+If you have a file `column.svg` then component name is `SvgColumn` by default. But with config from about the name
+will be `UiColumnIcon`.
+
+If you use memoization it looks like:
+
+```js
+import { memo } from 'react';
+
+const UiColumnIcon = (props) => {
+  // ...
+};
+
+const Memo = memo(UiColumnIcon);
+
+export { Memo as ReactComponent };
+```
+
+This option doesn't affect named exports.
+
 ### React
 
 We use automatic runtime only for React.

package.json

@@ -50,6 +50,7 @@
     "@changesets/cli": "^2.27.1",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
+    "@svgr/babel-plugin-transform-svg-component": "^8.0.0",
     "@tabula/eslint-config": "^0.1.1",
     "@tabula/prettier-config": "^0.1.4",
     "@tabula/typescript-config": "^0.2.1",

src/bundle/bundle.ts

@@ -16,6 +16,7 @@ type Options = {
   production: boolean;
   storybook: boolean;
   cssClassPrefix: boolean | string;
+  svgrComponentName?: (componentName: string) => string;
   target: Target;
   typings: boolean;
   watch: boolean;
@@ -28,6 +29,7 @@ export async function bundle({
   postBuild,
   production,
   storybook,
+  svgrComponentName,
   target,
   typings,
   watch,
@@ -64,6 +66,7 @@ export async function bundle({
     production,
     repositoryRoot,
     storybook,
+    svgrComponentName,
     target,
     typings,
   });

src/bundle/createBuildOptions.ts

@@ -21,6 +21,7 @@ type BrowserOptions = {
   production: boolean;
   repositoryRoot: string;
   storybook: boolean;
+  svgrComponentName?: (componentName: string) => string;
 };
 
 const extensions = [
@@ -86,7 +87,14 @@ function getPrefixFrom(cssClassPrefix: boolean | string, packageName: string) {
 
 async function applyBrowserOptions(
   buildOptions: BuildOptions,
-  { cssClassPrefix, name, production, repositoryRoot, storybook }: BrowserOptions,
+  {
+    cssClassPrefix,
+    name,
+    production,
+    repositoryRoot,
+    storybook,
+    svgrComponentName,
+  }: BrowserOptions,
 ) {
   const prefix = getPrefixFrom(cssClassPrefix, name);
 
@@ -116,7 +124,7 @@ async function applyBrowserOptions(
   buildOptions.plugins = [
     cssAutoImportPlugin(),
     stylesPlugin({ processCss }),
-    svgPlugin(),
+    svgPlugin({ svgrComponentName }),
     vanillaExtractPlugin({ isProduction: production, prefix }),
   ];
 
@@ -140,6 +148,7 @@ type Options = {
   production: boolean;
   repositoryRoot: string;
   storybook: boolean;
+  svgrComponentName?: (componentName: string) => string;
   target: Target;
   typings: boolean;
 };
@@ -154,6 +163,7 @@ export async function createBuildOptions({
   production,
   repositoryRoot,
   storybook,
+  svgrComponentName,
   target,
   typings,
 }: Options): Promise<BuildOptions> {
@@ -186,6 +196,7 @@ export async function createBuildOptions({
         production,
         repositoryRoot,
         storybook,
+        svgrComponentName,
       });
 
       break;

src/config/initConfig.ts

@@ -31,6 +31,7 @@ export async function initConfig(target: Target): Promise<void> {
   if (target === 'node') {
     delete config.storybook;
     delete config.cssClassPrefix;
+    delete config.svgrComponentName;
     delete config.build?.storybook;
     delete config.watch?.storybook;
   }

src/config/loadConfig.ts

@@ -112,6 +112,7 @@ type Result = {
   typings: boolean;
   storybook: boolean;
   cssClassPrefix: boolean | string;
+  svgrComponentName?: (componentName: string) => string;
 
   postBuild: Hook[];
 
@@ -160,6 +161,8 @@ export async function loadConfig(options: Options): Promise<Result> {
   const cssClassPrefix =
     options.cssClassPrefix ?? userConfig?.cssClassPrefix ?? defaults.cssClassPrefix;
 
+  const svgrComponentName = userConfig?.svgrComponentName;
+
   let postBuild: Hook | Hook[] = [];
 
   if (options.postBuild != null) {
@@ -180,6 +183,7 @@ export async function loadConfig(options: Options): Promise<Result> {
     typings: check && typings,
     storybook: target === 'browser' && storybook,
     cssClassPrefix,
+    svgrComponentName,
 
     postBuild,