Theme Icons

Out of the box, reablocks doesn't include any icons, however, you can you use any icon library you want. This is because reablocks wants to stay true to our core values of being unopinionated and lightweight.

Reablocks offers helpers to make it easier to document icons in your Storybook. Below is an example of how to use the helper components.

Creating an Icon Loader

Begin by creating a file to load and organize your SVG icons. If you're using Vite (opens in a new tab), you can take advantage of its glob import feature to dynamically load your icons. Create a file named icons.ts (or icons.js if you're using JavaScript) in your project.

import React from 'react';
 
const iconPaths = import.meta.glob('./*.svg');
 
export const icons = Object.keys(iconPaths).map(key => ({
  name: key.replace('.svg', '').replace('./', ''),
  component: React.lazy(async () => {
    const lazy: any = await iconPaths[key]();
    return { default: lazy.ReactComponent };
  })
}));

Result: This script dynamically loads all SVG icons from the specified directory, prepares them as React components, and exports them in a format compatible with reablocks' IconBlocks component.

Documenting Icons in Storybook

With your icons prepared, the next step is to document them in Storybook. Create a Storybook MDX file named Icons.stories.mdx to showcase your icons library.

import { Meta } from '@storybook/addon-docs';
import { IconBlocks } from 'reablocks';
import { icons } from './icons';
 
<Meta title="General/Icons" />
 
<style>
body {
  --icon-block-color: #fff;
  --icon-block-background: #000;
}
</style>
 
## Icons
<IconBlocks icons={icons} />

Result: This MDX file does the following:

Imports the icons you prepared earlier.
Uses the IconBlocks component from reablocks to display each icon alongside its name.

Customization Data Size