zede code

Раз уже закинул инфу про ленивые стили, то теперь расскажу про вторую ультимативную фишку для скорости и простоты разработки: https://icones.js.org

На данный момент это поисковик по самой крупной на данный момент OpenSource базе иконок (их более 200 000).
Заходим, выбираем нужный пресет, натыкиваем опций и копируем/сохраняем как нам нравится

Бонусы:
- глобальный поиск по названию / сету
- копирование через кучу возможных форматов (не хватает только формата для Android, так что это шанс сделать шаг в OpenSource)
- установка цвета и стиля иконки
- сбор иконок в бандл нужного формата (в том числе и в иконочный шрифт)

Можно пойти и серьезным путем встроив интеграцию себе прямо в сборщик благодаря unplugin-icons (советую отдельно разобраться с этим инструментом, так как он в целом предоставляет очень мощные опции для работы с иконками в проекте)
Тогда можно вообще не запариваться и писать вот такой код

import IconAccessibility from '~icons/carbon/accessibility'
import IconAccountBox from '~icons/mdi/account-box'

function App() {
  return (
    <div>
      <IconAccessibility />
      <IconAccountBox style={{ fontSize: '2em', color: 'red' }} />
    </div>
  )
}

Уже не раз спасало, когда какому-то пету нужны иконки, а искать в очередной раз в гугле нет желания

🔥11👍4

www.tgoop.com/zede_code/82

1.21K viewsedited  Mar 8, 2024 at 07:11

Раз уже закинул инфу про ленивые стили, то теперь расскажу про вторую ультимативную фишку для скорости и простоты разработки: https://icones.js.org

На данный момент это поисковик по самой крупной на данный момент OpenSource базе иконок (их более 200 000).
Заходим, выбираем нужный пресет, натыкиваем опций и копируем/сохраняем как нам нравится

Бонусы:
- глобальный поиск по названию / сету
- копирование через кучу возможных форматов (не хватает только формата для Android, так что это шанс сделать шаг в OpenSource)
- установка цвета и стиля иконки
- сбор иконок в бандл нужного формата (в том числе и в иконочный шрифт)

Можно пойти и серьезным путем встроив интеграцию себе прямо в сборщик благодаря unplugin-icons (советую отдельно разобраться с этим инструментом, так как он в целом предоставляет очень мощные опции для работы с иконками в проекте)
Тогда можно вообще не запариваться и писать вот такой код

import IconAccessibility from '~icons/carbon/accessibility'
import IconAccountBox from '~icons/mdi/account-box'

function App() {
  return (
    <div>
      <IconAccessibility />
      <IconAccountBox style={{ fontSize: '2em', color: 'red' }} />
    </div>
  )
}

BY zede code