---

⚡️ Ionicons for Qwik

1. Are you using the Qwik framework 🔗?
2. Do you want to use Ionicons 🔗?
3. Would you like to have full control over the icon SVGs in JSX?

Then this library is perfect for you!

📖 Table of contents

• ⚡️ Ionicons for Qwik
• 📖 Table of contents
• ⚒️ Installation
• 🐣 Icon search
• 🍽️ Usage
• ⚙️ Props
• 🌈 Styling
  • 📏 Size
  • 🎨 Color
• 🏎️ SVG/HTML footprint
• ❤️ Kudos
• 🩹 Problems?
• 🦔 Author

⚒️ Installation

NPM:

npm add qwik-ionicons

Yarn:

yarn add qwik-ionicons

🐣 Icon search

You need an icon? Go to:

➡️ Ionicons + Search 🔎

Pick an icon and remember its name.

An example (remember the marked name):

🍽️ Usage

You found an icon and have its name? Perfect! 🎉

Rewrite the name using Pascal Case. So flash-outline becomes FlashOutline.

Now you can import FlashOutline straight from the library:

import { FlashOutline } from "qwik-ionicons";

Here is an example component:

import { FlashOutline } from "qwik-ionicons";

export default component$(() => {
    return <FlashOutline width="64" data-test="flash-icon" />
})

⚙️ Props

The following attributes are typed:

• id: string
• class: string
• width: string
• height: string
• style: { /* CSS style object */ }

All other props are passed as well! You could, for example, pass test IDs like so:

export default component$(() => {
    return <FlashOutline width="64" data-test="flash-icon" />
})

🌈 Styling

All SVGs will have the class ionicon. This allows you to define global default styles for all ionicons using CSS.

📏 Size

You can use CSS class styles or inline CSS style to set the size per Icon.

If you need a default size for all ionicons, make use of the class ionicon.

🎨 Color

All SVGs make use of the currentColor property. By default, the icons will use the same color as the current text color. To adjust an icon's color, you just need to change the text color (CSS attribute color).

For that, you can use:

• CSS classes,
• inline style,
• Tailwind classes,
• ... or whatever you like :)

🏎️ SVG/HTML footprint

The library is constructed using Qwik's component$ method.

Every single icon variant is one component.

This means:

• You make use of Qwik's usual JS optimization feature.
• Only the icons you use are ever imported/loaded.
• The server pre-renders initially visible icons.

❤️ Kudos

1. Big Kudos to the Ionic-Team for creating the awesome Ionicons collection! ❤️
2. Thanks dear Qwik-Team for making it so simple to create a Qwik component library! ❤️

🩹 Problems?

Feel free to create a GitHub issue. Thanks for reporting any problems! ☺️

🦔 Author

Peter Kuhmann

GitHub
[email protected]