Icons in Bootstrap Icons can be easily converted to icon components.
$ make icon name=1-circle
The OneCircle.astro
file will be created in src/components/icons
after executing the above command.
Use size=1
to set the size
prop for the icon component.
Use color=1
to set the color
prop for the icon component.
$ make icon name=1-circle size=1
Note
The default value is false with bothsize
andcolor
being 0
This command will generate the following file.
src/components/icons/OneCircle.astro
---
export interface Props {
size: number;
}
const { size } = Astro.props;
---
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="currentColor" class="bi bi-1-circle" viewBox="0 0 16 16">
<path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383h1.312Z"/>
</svg>
Both size
and color
can be used.
$ make icon name=1-circle size=1 color=1
Note
Component extensions and paths can be changed by rewritingCOMPONENT_EXTENSION
andICON_PATH
in the Makefile.
Unused components can be identified and removed by executing the following commands.
Rewrite IGNORE_DIRS
and IGNORE_FILES
in tools/unused
for any directories or files you do not want to include.
$ make unused
The target files are written in TARGET_EXTENSIONS
and by default the following extensions are covered.
.jsx
.tsx
.astro
.svelte
.vue
src
├── assets
│ └── images
├── components
│ ├── atoms
│ ├── icons
│ ├── molecules
│ ├── organisms
│ └── templates
├── env.d.ts
├── layouts
│ └── Layout.astro
└── pages
└── index.astro