/astro-tailwindcss-template

🚀 × 💨 Astro and Tailwind CSS template repository. Icon component creation and unused component deletion functions are available.

Primary LanguageMakefile

Astro × Tailwind CSS Template

📷 Icon Component Creation

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 both size and color 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 rewriting COMPONENT_EXTENSION and ICON_PATH in the Makefile.

🗑 Remove modules that have not been called

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

Target extensions

The target files are written in TARGET_EXTENSIONS and by default the following extensions are covered.

  • .jsx
  • .tsx
  • .astro
  • .svelte
  • .vue

🌳 Directory structure directly under src

src
├── assets
│   └── images
├── components
│   ├── atoms
│   ├── icons
│   ├── molecules
│   ├── organisms
│   └── templates
├── env.d.ts
├── layouts
│   └── Layout.astro
└── pages
    └── index.astro