Website Technology Icons for Astro

Bundle of website development and technology icons such as databases, frameworks, languages, libraries and tools. Requires Astro 5.7 or newer.

Install

npm i @wticons/astro

Usage

Every icon is an Astro component that renders an <img> through Astro's <Image> from astro:assets. The SVG is emitted as a static, cacheable asset instead of being inlined into the page, so pages with many icons stay small.

---
import { Php, AdobePhotoshop, VisualStudioCode } from '@wticons/astro';
---

<Php />
<AdobePhotoshop width={32} height={32} class="icon" />
<VisualStudioCode alt="VS Code" loading="eager" />

Components accept the same props as <Image> except src. alt defaults to the product name (PHP, Node.js, Visual Studio Code), width and height default to 512 and loading to lazy. When the icon sits next to its name it is decorative, so pass alt=""; for print or PDF rendering pass loading="eager".

Importing from the package root pulls every icon into the build graph, so Astro emits all SVG files into dist/_astro even if you use only a few. To emit only the icons you render, import components individually:

---
import Php from '@wticons/astro/Php';
import AstroIcon from '@wticons/astro/Astro';
---

Inline SVG

If you need the SVG inline, for example to style it with CSS, import the file itself. Astro turns it into a component that renders the <svg> element:

---
import Php from '@wticons/astro/icons/php.svg';
---

<Php class="icon" />

Name conflicts

Some icons share a name with a global, such as Astro. Import them under an alias:

---
import { Astro as AstroIcon } from '@wticons/astro';
---

License

MIT