tailwindcss icons

? Вы можете помочь автору стать постоянным специалистом по поддержке открытого исходного кода, спонсируя его на GitHub.

---

@egoist/tailwindcss-icons

Используйте любой значок из Iconify

Установить

npm i @egoist/tailwindcss-icons -D

Использование

В вашем tailwind.config.js :

 const { iconsPlugin , getIconCollections } = require ( "@egoist/tailwindcss-icons" )

module . exports = {
  plugins : [
    iconsPlugin ( {
      // Select the icon collections you want to use
      // You can also ignore this option to automatically discover all individual icon packages you have installed
      // If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
      collections : getIconCollections ( [ "mdi" , "lucide" ] ) ,
      // If you want to use all icons from @iconify/json, you can do this:
      // collections: getIconCollections("all"),
      // and the more recommended way is to use `dynamicIconsPlugin`, see below.
    } ) ,
  ] ,
}

Вам также необходимо установить @iconify/json (полные коллекции значков, 50 МБ) или @iconify-json/{collection_name} (отдельный пакет значков):

 # install every icon:
npm i @iconify/json -D

# or install individual packages like this:
npm i @iconify-json/mdi @iconify-json/lucide -D

Затем вы можете использовать значки в своем HTML:

 <!-- pattern: i-{collection_name}-{icon_name} -->
< span class =" i-mdi-home " > </ span >

Найдите значок, который хотите использовать, здесь: https://icones.js.org.

Кончик

Чтобы получить полный список имен значков в виде машинописного текста, вы можете обратиться к этой проблеме.

Параметры плагина

Вариант	Тип	По умолчанию	Описание
префикс	нить	i	Префикс класса для соответствия правилам значков
шкала	число	1	Масштабировать относительно текущего размера шрифта
ширина хода	число	undefined	Ширина обводки для значков (это может работать не для всех значков)
дополнительные свойства	Запись<строка, строка>	{}	Дополнительные свойства CSS, применяемые к сгенерированному CSS.
коллекцияИменаПсевдоним	[ключ в CollectionNames]?: строка	{}	Псевдоним для настройки названий коллекций.

Пользовательские значки

С этим плагином вы также можете использовать собственные значки, например:

 module . exports = {
  plugins : [
    iconsPlugin ( {
      collections : {
        foo : {
          icons : {
            "arrow-left" : {
              // svg body
              body : '<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>' ,
              // svg width and height, optional
              width : 24 ,
              height : 24 ,
            } ,
          } ,
        } ,
      } ,
    } ) ,
  ] ,
}

Затем вы можете использовать этот собственный значок в качестве имени класса: i-foo-arrow-left .

Кончик

Чтобы прочитать пользовательские значки из каталога, вы можете обратиться к разделу «Загрузка svgs из файловой системы».

Генерировать значок динамически

Идея от @iconify/tailwind, спасибо автору Iconify за прекрасную работу!

Если вы хотите установить @iconify/json и использовать любой значок, который захотите, вам следует добавить еще один плагин в ваш tailwind.config.js .

Это связано с тем, что мы не можем обеспечить автозаполнение для всех значков из @iconify/json , это замедлит работу вашего редактора.

 const { iconsPlugin , dynamicIconsPlugin } = require ( "@egoist/tailwindcss-icons" )

module . exports = {
  plugins : [ iconsPlugin ( ) , dynamicIconsPlugin ( ) ] ,
}

Затем вы можете использовать значки динамически, например <span class="i-[mdi-light--home]"></span> .

Спонсоры

Лицензия

МИТ © ЭГОИСТ