Webpack plugin for automating icon sprite bundling.
npm install @ch-ui/webpack-plugin-icons@ch-ui/webpack-plugin-iconsA Webpack plugin for spriting icons used in your project in a Tailwind-like way.
``shell`
pnpm add -D @ch-ui/webpack-plugin-icons
`tsassetPath
import { IconsPlugin } from '@ch-ui/webpack-plugin-icons';
// ...
export default {
// ...
plugins: [
// ...
new IconsPlugin({
// Define the regular expression for the symbols you intend to use for your project; the expression must capture any strings you need to determine the path to the SVG asset.
symbolPattern:
'ph-icon--([a-z]+[a-z-]*)--(bold|duotone|fill|light|regular|thin)',
// The matches in your regular expression are spread onto which must return the path to the SVG file specified by the symbol../packages/icons/node_modules/@phosphor-icons/core/assets/${variant}/${name}${
assetPath: (name, variant) =>
variant === 'regular' ? '' : -${variant}
}.svg,`
// Tell the plugin how to name the sprite.
spriteFile: 'sprite.svg',
// Tell the plugin in which files to look for icon symbols.
contentPaths: ['*/.stories.tsx'],
}),
// ...
],
};
// ...
The following example is provided for a React component, but this plugin will work for any text content you might happen to use.
`tsx
import React, { ComponentPropsWithRef, forwardRef } from 'react';
const SPRITE = './assets/sprite.svg';
type IconName = string;
type IconVariant = 'bold' | 'duotone' | 'fill' | 'light' | 'regular' | 'thin';
type IconProps = ComponentPropsWithRef<'svg'> & {
symbol: ph-icon--${IconName}--${IconVariant};
};
const Icon = forwardRef
({ symbol, ...props }, forwardedRef) => {
return (
);
},
);
export const ExampleIcons = () => {
return (
<>
>
);
};
``