DEV Community

Cover image for A weekend project with Nuxt & Tailwindcss- Fluenticons
Fayaz Ahmed
Fayaz Ahmed

Posted on

13 8

A weekend project with Nuxt & Tailwindcss- Fluenticons

I made a small weekend project - Fluent Icons Viewer.

Microsoft has made a really great icon set called Fluent icons and they're open source but I was not able to find these icons by name and I had to look and find them manually.

Hence I made a small web project which lets you search and download the icons.

I have also made a dark mode to view these.

The project is open source and the code can be found here, contributions welcome.

I tried showing the icons inline but it affected the performance heavily, as there were over 2000 icons, hence I am showing them as images.

The trick with dark mode was, inverting the color of the image, seems hacky but worked great.

I am planning to add changing colors, a figma plugin and an api to embed these icons inside websites.

Top comments (1)

Collapse
 
devluc profile image
Devluc

Great work Fayaz love the project

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay