@unocss/preset-icons
Advanced tools
@unocss/preset-icons is a preset for UnoCSS that provides a convenient way to use icons from various icon sets in your projects. It allows you to easily integrate and customize icons using utility-first CSS.
Basic Icon Usage
This feature allows you to use icons from various icon sets by simply adding a class to your HTML or JSX. The class name follows a specific pattern that includes the icon set and the icon name.
import { defineConfig } from 'unocss';
import presetIcons from '@unocss/preset-icons';
export default defineConfig({
presets: [
presetIcons(),
],
});
// In your HTML or JSX
<div class="i-heroicons-outline-home"></div>Customizing Icon Size
You can easily customize the size of the icons by using utility classes like `text-2xl`. This leverages the utility-first approach of UnoCSS to provide flexible and easy-to-use customization options.
<div class="i-heroicons-outline-home text-2xl"></div>Customizing Icon Color
Similar to size customization, you can also change the color of the icons using utility classes like `text-red-500`. This makes it easy to integrate icons that match your design system.
<div class="i-heroicons-outline-home text-red-500"></div>react-icons provides a comprehensive set of icons for React applications. It supports a wide range of icon libraries and allows for easy integration and customization. Compared to @unocss/preset-icons, react-icons is specifically designed for React and offers a more component-based approach.
Font Awesome is a popular icon library that offers a vast collection of icons. It provides both free and premium icons and can be used in various frameworks and libraries. While @unocss/preset-icons focuses on utility-first CSS, Font Awesome provides a more traditional approach with its own set of classes and customization options.
Heroicons is a set of free, MIT-licensed high-quality SVG icons for you to use in your web projects. It is often used in combination with Tailwind CSS. Compared to @unocss/preset-icons, Heroicons is more focused on providing a specific set of icons rather than integrating multiple icon sets.
Use any icons with Pure CSS for UnoCSS.
Please refer to the documentation.
This preset is inspired from this issue created by @husayt. Based on the work of this PR by @userquin.
MIT License © 2021-PRESENT Anthony Fu
FAQs
Pure CSS Icons for UnoCSS
The npm package @unocss/preset-icons receives a total of 151,512 weekly downloads. As such, @unocss/preset-icons popularity was classified as popular.
We found that @unocss/preset-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.