heroicons

Красивые иконы SVG, созданные вручную, производители Tailwind CSS.
Доступно в качестве базовых значков SVG и через первые личные библиотеки React и VUE.

Просмотр на heroicons.com →

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

Самый быстрый способ использовать эти значки - просто скопировать источник для значка, который вам нужен с heroicons.com и встроить его непосредственно в свой HTML:

 <svg
  class = "size-6 Text-Gray-500" fill = "none" viewbox = "0 0 24 24" rosck = "currentColor" stuck-width = "2">
  <pathstroke-linecap = "круглый" инсульт-linejoin = "round" d = "m12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0118 0z"
  /> </svg>

Оба стиля значков предварительно сконфигурированы, чтобы быть стилизированными, установив свой свойство color CSS, либо вручную, либо используя классы утилит, такие как text-gray-500 в таком рамках, как Tailwind CSS.

Реагировать

Сначала установите @heroicons/react от NPM:

 NPM Установить @Heroicons/React

Теперь каждый значок может быть импортирован индивидуально в качестве компонента React:

 Import {beakericon} от '@geroicons/React/24/solid'function mycomponent () {
  return (<div> <beakericon classname = "size-6 text-blue-500"/> <p> ... </p> </div>
  )}

Значки наброски 24x24 могут быть импортированы с @heroicons/react/24/outline , сплошные значки 24x24 могут быть импортированы с @heroicons/react/24/solid , солидные значки 20x20 могут быть импортированы с @heroicons/react/20/solid и 16x16 солидных значков могут быть импортированы с @heroicons/react/16/solid .

Значки используют соглашение о именовании верхнего верблюда и всегда суффикс со Icon .

Просмотрите полный список имен значков на UNPKG →

Vue

Во -первых, установить @heroicons/vue из NPM:

 npm установить @heroicons/vue

Теперь каждый значок может быть импортирован индивидуально в качестве компонента VUE:

 <шаблон>
  <div>
    <Beakericon class = "Размер 6 Текст-синий-500" />>
    <p> ... </p>
  </div>
</template> <Script Setup> import {beakericon} от '@geroicons/vue/24/solid' </script>

Значки наброски 24x24 могут быть импортированы с @heroicons/vue/24/outline , солидные значки 24x24 могут быть импортированы с @heroicons/vue/24/solid , солидные значки 20x20 могут быть импортированы с @heroicons/vue/20/solid и 16x16 солидных значков могут быть импортированы с @heroicons/vue/16/solid .

Значки используют соглашение о именовании верхнего верблюда и всегда суффикс со Icon .

Просмотрите полный список имен значков на UNPKG →

Вклад

Хотя мы абсолютно ценим готовность чьей -либо готовности попытаться улучшить проект, в настоящее время мы заинтересованы только в вкладах, которые фиксируют ошибки, например, такие вещи, как неправильные типы типографии, или исправление значка, которая была экспортирована с помощью заполнения вместо инсульта и т. Д.

Мы не принимаем взносы для новых значков и не добавляем поддержку для других структур, таких как Svelte или SolidJS . Вместо этого мы рекомендуем вам выпустить свои собственные значки в своей собственной библиотеке и создать свои собственные пакеты для любых других фреймворков, которые вы хотели бы видеть в поддержке.

Лицензия

Эта библиотека лицензирована MIT.