Introduction
Hello, wonderful DEV people! 👋
This is not exactly a standard “simple error”, but rather a feature that the developers cannot bring to the Heroicons project in any way. The community has already paid attention to this and even formed a PR, but it was closed.
I will describe the solution for the Vue.js (with TypeScript) web application, but you can apply it to React, Svelte, or any other (or no framework at all).
Come on, let's resolve this problem! 👇
📝 Table of contents
Explanation of the problem
When we enlarge the icons, for example, through the built-in Tailwind CSS classes of that particular component, we may notice that the icon thickness becomes not quite what we expected.
<NewspaperIcon class="h-10 w-10" />
Yes, Tailwind CSS has a class stroke-{number}
that allows you to customize this attribute only for the element that has it. But in the Heroicons implementation, this stroke-width
attribute specified on the <path>
nested elements, not on the <svg>
wrapper (to which we have access).
☝️ By the way: The
stroke-width
attribute is a presentation attribute defining the width of the stroke to be applied to the shape.More info about
stroke-width
is here.
Therefore, we will have to write our styles to perform the desired behavior. There's nothing wrong with that, just watch the comments in the code!
Resolving the issue
Okay, here's a typical application structure on the Vue.js framework:
.
├── src
│ ├── assets
│ │ └── css
│ │ ├── ...
│ │ ├── heroicons.css # <-- styles for Heroicons
│ │ └── style.css # <-- styles for Tailwind CSS
│ ├── components
│ │ ├── ...
│ │ └── App.vue # <-- main app component
│ ├── main.ts # <-- main app script
│ └── ...
└── ...
And this is the main TypeScript file where our styles mounted and the Vue instance created:
// ./src/main.ts
import { createApp } from 'vue'
// Import styles.
import './src/assets/css/style.css'
import './src/assets/css/heroicons.css' // <-- styles for Heroicons
// Import main component.
import App from './src/components/App.vue'
// Create a new Vue instance.
const app = createApp(App)
// ...
To avoid conflicts, please verify that all styles you want to add or override satisfy these rules:
- Place them strictly after the basic Tailwind CSS style import;
- New styles have an associative class name;
Now let's form new styles to override the stoke-width
attribute of the Vue component of Heroicons:
/* ./src/assets/css/heroicons.css */
.heroicon-stroke-w-0\.4 > path {
stroke-width: 0.4;
}
.heroicon-stroke-w-0\.8 > path {
stroke-width: 0.8;
}
.heroicon-stroke-w-1 > path {
stroke-width: 1;
}
.heroicon-stroke-w-1\.2 > path {
stroke-width: 1.2;
}
.heroicon-stroke-w-1\.6 > path {
stroke-width: 1.6;
}
In the CSS code above, I decided to add icon styles to my project to cover these stroke-width
values: 0.4
, 0.8
, 1
, 1.2
, and 1.6
. And by default, without specifying the .heroicon-stroke-w-{number}
class, the icons will show up with a value of 2
.
And now, we're ready to use these classes like this:
<template>
<nav>
<router-link :to="{ name: 'news' }">
<NewspaperIcon class="h-10 w-10 heroicon-stroke-w-1.2" />
</router-link>
<!-- ... -->
</nav>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { NewspaperIcon } from '@heroicons/vue/outline' // <-- add outline Heroicons for Vue
export default defineComponent({
name: 'Menu',
components: {
NewspaperIcon, // add newspaper icon component
},
})
</script>
This should be enough for any of my needs in the project, but you (having understood the principle) can add any to your taste.
Conclusions
I really hope that the developers will listen to their users and introduce a normal built-in way to determine the stroke-width
attribute in Heroicons in the next versions of their wonderful product.
Have a successful work and let simple errors (or such CSS complexities) never stop you on the way to realizing your projects! 😉
Photos and videos by
- Maik Jonietz https://unsplash.com/photos/_yMciiStJyY
- Alessandro Bianchi https://unsplash.com/photos/_kdTyfnUFAc
P.S.
If you want more articles (like this) on this blog, then post a comment below and subscribe to me. Thanks! 😻
❗️ You can support me on Boosty, both on a permanent and on a one-time basis. All proceeds from this way will go to support my OSS projects and will energize me to create new products and articles for the community.
And of course, you can help me make developers' lives even better! Just connect to one of my projects as a contributor. It's easy!
My main projects that need your help (and stars) 👇
- 🔥 gowebly: A next-generation CLI tool that makes it easy to create amazing web applications with Go on the backend, using htmx, hyperscript or Alpine.js and the most popular CSS frameworks on the frontend.
- ✨ create-go-app: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.
Top comments (0)