duo-icons

v1.1.4

Published

a year ago

Beautiful and modern duotone icons.

Downloads

225

0High
0Medium
0Low

fernandocfernandez

duotone icons open source tailwind icons css html duotone icons open source

Duoicons

A collection of modern and simple duotone icons and open source!

🔗 Website

[https://duoicons.vercel.app/]

Installation

Implementation of the duo icon library for web applications.

Package Managers

  npm i duo-icons

  yarn add duo-icons

CDN

  <!-- Production version -->
<script src="https://unpkg.com/duo-icons@latest"></script>

Usage

With unpkg

  <!DOCTYPE html>
<body>
  <i data-duoicon="brush" class="my-class"></i>
  <i data-duoicon="box-2"></i>
  <i data-duoicon="menu"></i>

  <script src="https://unpkg.com/duo-icons@latest"></script>
  <script>
    duoIcons.createIcons();
  </script>
</body>

With ESModules

 <!-- Your HTML file -->
<i data-duoicon="menu"></i>

 import { createIcons } from 'duo-icons';
 createIcons();

Customization

Apply only one color

The applied color is inherited by all layers, including the child layer, which by default applies an opacity of 30%

 <!-- in tailwind css -->
<i data-duoicon="menu" class="text-indigo-600"></i>

  <!-- in others frameworks-->
  <style>
    .duoicon{
      color:red
    }
  </style>
  <i data-duoicon="menu"></i>

Apply two colors

Tailwind css

1.Install the package if you have not already done so

  npm i duo-icons

2.Add the DuoIcons plugin

  // tailwind.config.js
    module.exports = {
      plugins: [
          require('duo-icons/plugin'),
      ],
    }

3.Usage class

 <!-- Your HTML file class tailwind -->
<i data-duoicon="menu" class="duoicon-primary:text-indigo-600
duoicon-secondary:opacity-100 duoicon-secondary:text-indigo-400"></i>

 <!-- hover,focus,etc -->
<i data-duoicon="menu" class="duoicon-primary:text-indigo-600 
duoicon-secondary:opacity-100 duoicon-secondary:text-indigo-400 duoicon-primary:hover:text-indigo-800 duoicon-secondary:hover:text-indigo-800"></i>

Other frameworks

 <!-- Your HTML file class tailwind -->
 <style>
    .duoicon .duoicon-primary-layer{
      color:red
    }
    .duoicon .duoicon-secondary-layer{
      /*By default, the child layer has an opacity of 30% applied. If you apply color to the child layer, be sure to set the opacity to 1 */
      opacity:1;
      color:blue
    }
  </style>
<i data-duoicon="menu"></i>