@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 168,490 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 0 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
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.