feat: custom cssPrefix support

Author: charles4221

.tool-versions

@@ -1,2 +1 @@
 nodejs 22.17.1
-python 3.9.19 2.7.18

package.json

@@ -14,6 +14,12 @@
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
+    "./components/rsc/CustomPrefixProvider": {
+      "types": "./dist/components/rsc/CustomPrefixProvider.d.ts",
+      "import": "./dist/components/rsc/CustomPrefixProvider.js",
+      "require": "./dist/components/rsc/CustomPrefixProvider.cjs",
+      "default": "./dist/components/rsc/CustomPrefixProvider.js"
+    },
     "./package.json": "./package.json"
   },
   "homepage": "https://github.com/FortAwesome/react-fontawesome",

src/components/rsc/CustomPrefixProvider.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { config } from '@fortawesome/fontawesome-svg-core'
+
+interface CustomPrefixProviderProps {
+  customPrefix: string
+}
+
+export const CustomPrefixProvider = ({
+  customPrefix,
+}: CustomPrefixProviderProps): null => {
+  config.cssPrefix = customPrefix
+
+  return null
+}

src/utils/__tests__/get-class-list-from-props.test.ts

@@ -1,4 +1,5 @@
 import {
+  config,
   PullProp,
   RotateProp,
   SizeProp,
@@ -150,4 +151,20 @@ describe('get class list', () => {
       ])
     },
   )
+
+  describe('with custom cssPrefix configured', () => {
+    const customPrefix = 'custom-prefix'
+
+    beforeEach(() => {
+      config.cssPrefix = customPrefix
+    })
+
+    it('should use custom cssPrefix for all classes', () => {
+      const classList = getClassListFromProps(props)
+      const classes = expectedClasses.map((cls) =>
+        cls.replace('fa-', `${customPrefix}-`),
+      )
+      expect(classList).toStrictEqual(classes)
+    })
+  })
 })

src/utils/get-class-list-from-props.ts

@@ -1,13 +1,20 @@
+import { config } from '@fortawesome/fontawesome-svg-core'
+
 import {
   ANIMATION_CLASSES,
-  IS_VERSION_7_OR_LATER,
   PULL_CLASSES,
   ROTATE_CLASSES,
   SIZE_CLASSES,
   STYLE_CLASSES,
+  IS_VERSION_7_OR_LATER,
 } from './constants'
 import { FontAwesomeIconProps } from '../types/icon-props'
 
+function withCustomPrefix(cls: string): string {
+  const customPrefix = config.cssPrefix || config.familyPrefix || 'fa'
+  return customPrefix === 'fa' ? cls : cls.replace('fa-', `${customPrefix}-`)
+}
+
 /**
  * Get CSS class list from a props object.
  * This function maps our React props to the corresponding CSS class names from Font Awesome.
@@ -80,5 +87,11 @@ export function getClassListFromProps(props: FontAwesomeIconProps): string[] {
   if (rotateBy) result.push(STYLE_CLASSES.rotateBy)
   if (widthAuto) result.push(STYLE_CLASSES.widthAuto)
 
-  return result
+  const prefix = config.cssPrefix || config.familyPrefix || 'fa'
+
+  return prefix === 'fa'
+    ? result
+    : // TODO: see if we can achieve custom prefix support without iterating
+      // eslint-disable-next-line unicorn/no-array-callback-reference
+      result.map(withCustomPrefix)
 }

tsup.config.ts

@@ -1,13 +1,29 @@
-import { defineConfig } from 'tsup'
+import { defineConfig, type Options } from 'tsup'
 
-export default defineConfig({
-  name: 'react-fontawesome',
-  entry: ['src/index.ts'],
+const defaultConfig: Options = {
   format: ['cjs', 'esm'],
   dts: true,
   bundle: true,
   clean: true,
   minify: false,
   treeshake: true,
-  outDir: 'dist',
-})
+}
+
+export default defineConfig([
+  // Build config for React Fontawesome library
+  {
+    ...defaultConfig,
+    name: 'react-fontawesome',
+    entry: ['src/index.ts'],
+    outDir: 'dist',
+  },
+  // Build config for React Server Components
+  {
+    ...defaultConfig,
+    name: 'react-fontawesome-rsc',
+    entry: ['src/components/rsc/*.tsx'],
+    outDir: 'dist/components/rsc',
+    bundle: false,
+    treeshake: false,
+  },
+])