Skip to content

feat: complete plugin rewrite #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jurerotar wants to merge 8 commits into
base: master
Choose a base branch
from
Open

feat: complete plugin rewrite #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
349ad4c
feat: complete plugin rewrite
jurerotar Mar 16, 2026
27641c2
fix: fontawesome support rewrite
jurerotar Mar 17, 2026
a0a9abf
fix: format
jurerotar Mar 17, 2026
b6488b9
chore: expanded test suite
jurerotar Mar 17, 2026
6e605ee
chore: refactored apps
jurerotar Mar 17, 2026
6002c0c
feat: expanded demo apps with additional import variants
jurerotar Mar 17, 2026
b66afcc
chore: added test to validate we don't change fontawesomeicon string …
jurerotar Mar 17, 2026
3123a10
chore: 0.9.2-rc.1
jurerotar Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/rsbuild-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"scripts": {
"dev": "rsbuild dev",
"build": "rsbuild build",
"preview": "rsbuild preview",
"lint": "biome lint --write --no-errors-on-unmatched",
"lint:check": "biome lint --no-errors-on-unmatched",
Expand Down
274 changes: 83 additions & 191 deletions apps/rsbuild-demo/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { BiAlarm } from 'react-icons/bi';
import { ArrowBigDown } from 'lucide-react';
import { SunIcon } from '@radix-ui/react-icons';
import { BellIcon } from '@heroicons/react/24/outline';
import HeroiconBellDefault from '@heroicons/react/24/outline/BellIcon';
import { IconAlertCircle } from '@tabler/icons-react';
import { Alarm } from 'phosphor-react';
import { AcornIcon } from '@phosphor-icons/react';
Expand All @@ -13,259 +14,150 @@ import { BehancePlain } from 'devicons-react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import AlarmMui from '@mui/icons-material/Alarm';
import { Alarm as AlarmMuiNamed } from '@mui/icons-material';
import { Add as CarbonAdd } from '@carbon/icons-react';

const App = () => {
return (
<div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
<h1 style={{ textAlign: 'center' }}>React Icons Sprite - Rsbuild Demo</h1>
<div className="app">
<h1 className="app-title">React Icons Sprite - Rsbuild Demo</h1>

<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
gap: '20px',
}}
>
<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
react-icons/bi
</h2>
<BiAlarm
size={32}
color="red"
/>
<div className="icon-grid">
<section className="icon-card">
<h2 className="icon-title">react-icons/bi</h2>
<BiAlarm size={32} />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
lucide-react
</h2>
<ArrowBigDown
size={32}
color="blue"
/>
<section className="icon-card">
<h2 className="icon-title">lucide-react</h2>
<ArrowBigDown size={32} />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
@radix-ui/react-icons
</h2>
<section className="icon-card">
<h2 className="icon-title">@radix-ui/react-icons</h2>
<SunIcon
width={32}
height={32}
/>
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
@heroicons/react
</h2>
<section className="icon-card">
<h2 className="icon-title">@heroicons/react</h2>
<BellIcon
width={32}
height={32}
/>
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
@tabler/icons-react
<section className="icon-card">
<h2 className="icon-title">
@heroicons/react (default subpath import)
</h2>
<HeroiconBellDefault
width={32}
height={32}
/>
</section>

<section className="icon-card">
<h2 className="icon-title">@tabler/icons-react</h2>
<IconAlertCircle size={32} />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
phosphor-react
</h2>
<section className="icon-card">
<h2 className="icon-title">phosphor-react</h2>
<Alarm size={32} />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
@phosphor-icons/react
</h2>
<section className="icon-card">
<h2 className="icon-title">@phosphor-icons/react</h2>
<AcornIcon size={32} />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
react-feather
</h2>
<section className="icon-card">
<h2 className="icon-title">react-feather</h2>
<Bell size={32} />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
react-bootstrap-icons
</h2>
<section className="icon-card">
<h2 className="icon-title">react-bootstrap-icons</h2>
<BootstrapAlarm size={32} />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
grommet-icons
</h2>
<section className="icon-card">
<h2 className="icon-title">grommet-icons</h2>
<Add size="32px" />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
remixicon-react
</h2>
<section className="icon-card">
<h2 className="icon-title">remixicon-react</h2>
<RiAlarmFill size={32} />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
@remixicon/react
</h2>
<section className="icon-card">
<h2 className="icon-title">@remixicon/react</h2>
<RiAlarmFill size={32} />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
devicons-react
</h2>
<section className="icon-card">
<h2 className="icon-title">devicons-react</h2>
<BehancePlain size={32} />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
@fortawesome/react-fontawesome
</h2>
<section className="icon-card">
<h2 className="icon-title">@fortawesome/react-fontawesome</h2>
<FontAwesomeIcon
icon={faCoffee}
size="2x"
/>
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
@mui/icons-material
</h2>
<section className="icon-card">
<h2 className="icon-title">@mui/icons-material</h2>
<AlarmMui fontSize="large" />
</section>

<section
style={{
border: '1px solid #ccc',
borderRadius: '8px',
padding: '16px',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '14px', marginBottom: '10px' }}>
@carbon/icons-react
<section className="icon-card">
<h2 className="icon-title">
@mui/icons-material (named root import)
</h2>
<AlarmMuiNamed fontSize="large" />
</section>

<section className="icon-card">
<h2 className="icon-title">@carbon/icons-react</h2>
<CarbonAdd size={32} />
</section>
</div>

<style>{`
.app {
padding: 20px;
font-family: sans-serif;
}

.app-title {
text-align: center;
}

.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}

.icon-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
text-align: center;
}

.icon-title {
font-size: 14px;
margin-bottom: 10px;
}
`}</style>
</div>
);
};
Expand Down
1 change: 1 addition & 0 deletions apps/vite-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "biome lint --write --no-errors-on-unmatched",
"lint:check": "biome lint --no-errors-on-unmatched",
Expand Down
Loading