docs(react): add instructions for how to add SVGR for Vite + React (#…

…27551)

This PR adds a section to the `Adding Images, Fonts, and Files` React
recipe to show how to use SVGR with Vite.

With our Vite setup, we're keeping the configuration minimal so we don't
want SVGR out of the box.

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #19282

docs/shared/guides/adding-assets.md

@@ -23,9 +23,9 @@ This works in CSS files as well.
 
 ## Adding SVGs
 
-SVG images can be imported using the method described above.
+SVG images can be imported using the method described previously.
 
-Alternatively, you can import SVG images as React components.
+Alternatively, you can import SVG images as React components using [SVGR](https://react-svgr.com/).
 
 ```typescript
 import React from 'react';
@@ -36,14 +36,88 @@ const Header = () => <Logo title="Logo" />;
 export default Header;
 ```
 
-This method of import allow you to work with the SVG the same way you would with any other React component. You can style it using CSS, styled-components, etc. The SVG component accepts a `title` prop, as well as any other props that the `svg` element accepts.
+This method of import allow you to work with the SVG the same way you would with any other React component. You can style it using CSS, [styled-components](https://styled-components.com/), [TailwindCSS](https://tailwindcss.com/), etc. The SVG component accepts a `title` prop, as well as any other props that the `svg` element accepts.
 
-Note that if you are using Next.js, you have to opt into this behavior. To import SVGs as React components with Next.js, you need to make sure that `nx.svgr` value is set to `true` in your Next.js application's `next.config.js` file:
+{% callout type="note" title="Additional configuration may be required" %}
+Note that SVGR is enabled by the `@nx/webpack` plugin by default. For other plugins, you will need to enable it on your own.
+{% /callout %}
 
-```javascript
-module.exports = withNx({
+### SVGR for Next.js
+
+To import SVGs as React components with Next.js, you need to make sure that `nx.svgr` value is set to `true` in your Next.js application's `next.config.js` file:
+
+```javascript {% fileName="next.config.js" highlightLines=[4] %}
+// ...
+const nextConfig = {
   nx: {
     svgr: true,
   },
+};
+// ...
+module.exports = composePlugins(...plugins)(nextConfig);
+```
+
+### SVGR for Vite
+
+To import SVGs as React components with Vite, you need to install the `vite-plugin-svgr` package.
+
+{% tabs %}
+{%tab label="npm"%}
+
+```shell
+npm add -D vite-plugin-svgr
+```
+
+{% /tab %}
+{%tab label="yarn"%}
+
+```shell
+yarn add -D vite-plugin-svgr
+```
+
+{% /tab %}
+{%tab label="pnpm"%}
+
+```shell
+pnpm add -D vite-plugin-svgr
+```
+
+{% /tab %}
+
+{% tab label="bun" %}
+
+```shell
+bun add -D vite-plugin-svgr
+```
+
+{% /tab %}
+{% /tabs %}
+
+Then, configure Vite as follows:
+
+```javascript {% fileName="vite.config.ts" highlightLines=[5, "10-18"]%}
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import svgr from 'vite-plugin-svgr';
+
+export default defineConfig({
+  // ...
+  plugins: [
+    svgr({
+      svgrOptions: {
+        exportType: 'named',
+        ref: true,
+        svgo: false,
+        titleProp: true,
+      },
+      include: '**/*.svg',
+    }),
+    react(),
+    nxViteTsPaths(),
+    // ...
+  ],
+  //...
 });
 ```