Иконки ico: Бесплатные иконки SVG, PNG, ICO или ICNS

Favicon.ico или иконка в адресной строке браузера / Хабр

lautsevich 12 июн 2007 в 14:15

Время на прочтение 3 мин

Количество просмотров 24K

Разработка веб-сайтов *

Сразу отмечаю, что статья из разряда «для самых маленьких». Просто пощу ее, вдруг пригодится кому-нибудь.

Favicon, что это и для чего он нужен? Favicon.ico это файл ярлыка в ОС Win32 который является иконкой-ссылкой на страничку сайта, на которой он присутствует. Его можно видеть в в избранных ссылках вашего браузера, адресной строке и на закладках в многооконных браузерах. Как его прикруть к страничке? Для того чтобы нарисовать иконку вам необходимо воспользоваться любым графическим редактором, но после вам необходимо конвертировать ваш полученный графический файл в формат .ico либо же изначально рисовать его в специализированных редакторах типа AWIcons Pro, IconWorkshop, MicroAngelo и т.п. Простое переименование расширения файла в .

ico плохая идея, т.к. некоторые браузеры не примут такой файл и не отобразят иконку. Если вам всеже привычнее работать в фотошопе, то вот здесь вы можете скачать плагин для работы с изображениями в формате .ico. Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats в корневой директории Photoshop.

Итак, у нас есть иконка, конвертированная правильным способом в формат .ico. Далее по пунктам.

1. Название иконки должно быть favicon.ico, т.к. некоторые старые браузерв не смогут опознать ее именно как ярлык сайта.
2. Подключение иконки к документу осуществляется следующим кодом. Обязательно необходимо указать тип содержимого как image/x-icon и связь с документом как shortcut icon. Кроме того, что это обязательно по спецификации w3c, есть вероятность того, что вы снова споткнетесь об особенности работы некоторых браузеров, не указав тип содержимого.

3. Размер иконки вы можете выбрать от 16х16 до 48х48, чем больше иконка тем она будет симпатичнее, в случае, когда пользователь вздумает поместить ярлык на ваш сайт на свой рабочий стол, например. Но! Мы живем в реальности которая называется “Все мы любим Internet Explorer”. Поясняю, иконки размером превышаюзие 16х16 px попросту проигнорируются IE 6.0 и ниже. Однако существует возможность в один файл .ico упаковать несколько изображение, как разных по размеру, так и по содержимому, пользуйтесь этой возможностью.
4. Где же разместить файл с иконкой сайта? Для надежности просто положите его в корневую директорию вашего сайта.

Грабли.

1. Как указал выше, IE lt 6.0 не понимает иконок, превышающих 16х16 пикселей.
2. IE 6.0 и ниже отобразит иконку только после добавления странички в избранное и перезагрузки. Ну любит MS перезагружать все и вся ;-).
3. Если IE 6.0 и ниже и после этого не отобразит ее, то попробуйте почистить кэш браузера.
4. Если и после этого иконка не появится там, где ей положено быть необходимо удостовериться, что ваш сервер передает иконку в браузер и отображает ее, а не передает, как файл и предлагает вам его сохранить.

Это проверяется простым путем ввода в браузер адреса вашего сайта и имени иконки, например yoursite.com/favicon.ico, при условии конечно, что иконка лежит в корневой директории. Во втором случае ваш сервер не настроен на отображение файлов .ico. Для того чтобы исправить эту ситуацию вам необходимо создать в корне сайта файл .htaccess и добавить в него следующую строку AddType image/x-icon .ico.

Ссылки по теме:

1. Как добавить собственную иконку сайта в адресную строку и в закладки браузера? www.htmlbook.ru/faq/?a=28
2. Favicon — иконка в адресной строке. lines.net.ua/index.php?loc=articles&category=webdesign&art=3
3. Иконка в адресной строке. www.codenet.ru/webmast/favicon.php
4. favicon.ru — favicon.ico generator and editor. favicon.ru

Кросспост из webdev.lovata.com.

Теги:

• webdev
• html
• xhtml
• favicon

Хабы:

• Разработка веб-сайтов

Всего голосов 30: ↑21 и ↓9 +12

Комментарии 24

Павел Ловцевич @lautsevich

CTO

Хабр Q&A Facebook Twitter Github Telegram

Как создавать иконки сайтов в 2023 году — всё о favicon — Михаил Гок на vc.

ru

Эта статья перевод англоязычной статьи Андрея Ситника из блога Злых марсиан.

959 просмотров

Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы. Фронтенд-разработчики сейчас вынуждены создавать более 20 PNG-файлов, чтобы отобразить крошечный логотип веб-сайта на вкладке браузера или сенсорном экране. Статья расскажет, как использовать более разумный подход и создать минимальный набор иконок, соответствующий большинству современных потребностей.

Статья глубоко погружается в тему, поэтому в начале я даю два фрагмента кода для тех, кто уже достаточно настрадался и понимает, что делать. Тем не менее, я всем рекомендую читать статью целиком!

Экстремально короткая версия

Вместо того, чтобы создавать десятки иконок, обойдемся созданием пяти иконок и одного файла JSON.

HTML:

<link rel=»icon» href=»/favicon. ico»><!— 32×32 —> <link rel=»icon» href=»/icon.svg» type=»image/svg+xml»> <link rel=»apple-touch-icon» href=»/apple-touch-icon.png»><!— 180×180 —> <link rel=»manifest» href=»/manifest.webmanifest»>

apple touch icon лучше ставить в начало — так старые версии сафари используют иконку лучше, а другим браузерам это не мешает

замечание от переводчика

И файл веб-манифеста:

// manifest.webmanifest { «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

Вот и всё. Если вы хотите знать, как я к этому пришел, к каким компромиссом пришлось прибегнуть, и как поэтапно создать такой набор с нуля, читайте основную часть статьи.

Воспользуйтесь генератором иконок, созданным по этой статье

Длинная версия, со всеми объяснениями

Концепция favicon (является сокращением от favorite icon, «любимая иконка»), существует с начала 2000-х годов. Мы каждый день видим эти милые маленькие изображения на панели вкладок браузера, они помогают нам различать открытые веб-сайты. Пользователи ожидают, что на вашем сайте будет favicon. Это одна из тех мелочей, которые заставляют людей относиться к вам серьезно.

Даже Apple, у которой всегда была какая-то эстетическая война с иконками (их не принимали в Купертино, скрывая favicon в Safari в течение многих лет) наконец-то сдалась и теперь правильно отображает их на всех своих устройствах.

Если у вас есть общедоступный веб-сайт, у него должен быть favicon. Многие люди думают, что одной иконки хватит для всех устройств, но, к сожалению, это не так.

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

Набор favicon, генерируемых популярным онлайн-генератором

Как создатель Nano ID и сторонник минималистичных библиотек, я предпочитаю думать иначе. Какой самый эффективный набор иконок веб-сайтов? Какие форматы устарели? Какие типы значков можно заменить с небольшими компромиссами?

Таким образом, я поставил перед собой цель создать минимальный список favicon, которые будут работать во всех случаях и во всех браузерах, за исключением некоторых редких случаев, но даже там всё будет работать, просто не на 100% идеально.

Идеальный набор Favicon

Вместо того, чтобы создавать много изображений разных размеров, я решил полагаться на SVG и масштабирование браузера. Не волнуйтесь по поводу производительности:

• Браузеры загружают favicon в фоновом режиме, поэтому большой размер favicon-файла не влияет на производительность веб-сайта.

• SVG — отличный способ уменьшить размер иконки для изображений, которые не должны быть растровыми; для многих логотипов результирующий файл будет намного меньше, чем PNG.

• Имея всего 3 PNG-файла, можно позволить себе оптимизировать их сильнее, хитро подбирая параметры в сложных инструментах. Это решит проблему тех пользователей, которые платят за каждый МБ на своём интернет-тарифе.

Теперь перейдём к тому минимальному набору, который я вывел из своих исследований и экспериментов. Этот список должен работать со всеми популярными браузерами и устройствами, как старыми, так и новыми.

1. favicon. ico для устаревших браузеров

   Файлы ICO могут содержать внутри несколько версий изображения под разный размер. Я рекомендую придерживаться одного изображения размера 32 × 32. Версию 16×16 стоит создавать только если логотип не становится слишком размытым или ваш дизайнер вручную может перерисовать его под этот размер. Именно этот файл лучше держать по точному адресу: https://example.com без кеш-бастеров и хитрых путей. Значок должен быть на https://example.com/favicon.ico. Некоторые инструменты, такие как RSS-ридеры, просто запрашивают /favicon. ico с сервера и не утруждают себя поиском в другом месте. Нам нужны sizes=«any» для на файл. ico, чтобы исправить ошибку Chrome, из-за которой он выбирает файл ICO вместо SVG.

2. Один значок SVG со светлой/темной версией для современных браузеров SVG — это векторный формат, который описывает кривые вместо пикселей. При больших размерах это более эффективно, чем растровые изображения. На момент написания этой статьи 72% всех браузеров поддерживают SVG-иконки. Ваша HTML-страница должна иметь тег в с rel=«icon», type=»image/svg+xml» и с href, содержащим ссылку на SVG-файл с атрибутами.

   SVG — это формат XML, он может содержать тег системными темами.

3. Изображение PNG 180×180 для устройств Apple Значок Apple touch — это изображение для рабочего стола iPhone или iPad. На вашей HTML-странице должен быть тег внутри. Начиная с iOS 8+, для iPad требуется изображение с разрешением 180 × 180. Более старые устройства уменьшат его масштаб. Вопрос производительности пояснён выше.Небольшое примечание: значок Apple touch будет выглядеть лучше, если сделать ему отступ размером 20 пикселей и добавить цвет фона. Для этого вы можете использовать любой графический редактор.

4. Манифест веб-приложения с иконками PNG 192×192 и 512×512 для устройств Android

   — Манифест веб-приложения — это файл JSON, содержащий все сведения, необходимые браузеру для установки вашего веб-сайта в качестве системного приложения. Этот формат появился у Google в рамках инициативы PWA. — Ваша HTML-страница должна содержать тег со ссылкой на файл манифеста. — В манифесте должно быть поле icon, которое ссылается на два значка: 192 × 192 для отображения на главном экране и 512 × 512, которые будут использоваться в качестве заставки при загрузке PWA.

{ «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

Мы кого-то забыли?

Конечно, есть и другие варианты favicon. Дальше я объясняю, почему они устарели. Возможно, пришло время попрощаться с некоторыми менее успешными форматами.

Значок плитки Windows

Microsoft Edge раньше поддерживал специальный формат значков для прикрепления веб-сайтов к меню «Пуск». Для последних версий Windows это больше не требуется.

Закрепленный значок Safari

Ранее в Safari требовался монохромный значок SVG для закрепленных вкладок. Однако, начиная с Safari 12, мы можем использовать обычный значок для закрепленных вкладок. Дажеapple. com больше не использует mask-icon.

rel=”shortcut”

Многие (ныне устаревшие) руководства будут включать значок favicon. ico в HTML, как тут:

<link rel=»shortcut icon» href=»/favicon.ico»>

Имейте в виду, что shortcut не является и никогда не был допустим в отношении ссылки. Прочтите эту удивительную статью Матиаса Байненса десятилетней давности, в которой объясняется, почему нужно писать просто icon, а не shortcut icon.

Yandex Tableau

Яндекс Браузер — это браузер на базе Chromium от крупнейшей российской поисковой системы. В России его доля на рынке составляет 20%. У него есть приятная функция, которая позволяет веб-сайту отображать текущие данные в виджетах на главном экране с помощью специального JSON-манифеста, предоставляемого ссылкой yandex-tableau-widget. Однако эта функция оказалась не очень популярной, и теперь Яндекс удалил соответствующую техническую документацию со своего сайта. Обычные манифесты значков будут работать также хорошо.

Opera Coast

В прошлом, Opera Coast — экспериментальный браузер для iOS, требовал специального значка размером 228×228. Этот браузер покинул App Store в 2017 году, и я сомневаюсь, что с тех пор он пережил многочисленные обновления iOS.

Теперь, когда мы попрощались с нашими павшими товарищами, давайте посмотрим, как создать идеальный набор favicon для тех, кто всё ещё стоит на ногах.

Как создать окончательный набор favicon

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

Вот как создать наш идеальный минималистичный набор значков за шесть быстрых шагов. Всё, что нам нужно для начала, — это SVG-файл логотипа, который вы хотите использовать.

Шаг 1: Подготовка SVG

Убедитесь, что изображение в формате SVG имеет квадратную форму. Откройте исходный файл в вашем системном средстве просмотра и проверьте ширину и высоту изображения. Размер SVG легко настроить с помощью любого редактора SVG. В Inkscape вы можете изменить размер документа, выбрав File → Document Properties, а затем отцентровать логотип с помощью Object → Align и Distribute.

Сохраните ваш файл в формате icon. svg. Теперь давайте поработаем с SVG и сделаем так, чтобы он хорошо сочетался с современными системными темами. Спросите своего дизайнера, как следует инвертировать цвета для темной темы (в черно-белых логотипах вы просто меняете черный на белый).

Теперь откройте свой SVG-файл в текстовом редакторе. Найдите с темной или отсутствующей заливкой. Добавьте медиа-выражение CSS, которое будет запускаться при изменении темы, и измените заливку на нужные вам цвета:

<svg xmlns=»http://www. w3.org/2000/svg» viewBox=»0 0 500 500″> + <style> + @media (prefers-color-scheme: dark) { + .a { fill: #f0f0f0 } + } + </style> — <path fill=»#0f0f0f» d=»…» /> + <path fill=»#0f0f0f» d=»…» /> </svg>

Вы также можете использовать этот метод с медиа-выражением в SVG, чтобы добавить цвета P3 с широкой гаммой к вашим значкам.

Шаг 2: Создание ico файла

Откройте свой файл icon. svg в редакторе растровой графики. Я рекомендую GIMP; он бесплатный и мультиплатформенный.

Согласитесь на конвертацию SVG в растр. Установите ширину и высоту равными 32 пикселям. Экспортируйте файл в favicon. ico с использованием настроек: 32 бит/с, 8-битный альфа-код, без настроек палитры (32 bpp, 8-bit alpha, no palette).

Если у вас нет GIMP, вы можете установить Inkscape и ImageMagick и преобразовать SVG в ICO в терминале:

inkscape ./icon.svg —export-width=32 —export-filename=»./tmp.png» # In Windows call `magick convert . /tmp.png ./favicon.ico` convert ./tmp.png ./favicon.ico rm ./tmp.png

Уменьшите масштаб изображения до 16×16 и проверьте, как значок выглядит. Если он стал слишком размытым, лучше попросить вашего дизайнера сделать крошечную версию логотипа на заказ.

Чтобы включить отдельную версию значка размером 16×16:

• Откройте значок favicon. ico со значком 32×32.
• Создайте новый слой размером 16×16.
• Поместите в этот слой версию значка размером 16×16.
• Экспортируйте файл. GIMP сохранит каждый макет как отдельную версию значка.

Или вы можете сделать то же самое в ImageMagick с помощью:

convert ./icon-32.png ./icon-16.png ./favicon.ico

Шаг 3: Создание png изображений

Снова откройте исходный SVG-файл в редакторе растровой графики и создайте изображение размером 512×512. Экспортируйте его в видеicon-512.png.

Масштабируйте изображение до 192×192 и экспортируйте его в icon-192. png. Теперь масштабируйте само изображение до 140×140 и установите размер холста 180 ×180, а затем экспортируйте его в формате apple-touch-icon. png.

Или вы можете сделать то же самое в Inkscape:

inkscape ./icon.svg —export-width=512 —export-filename=»./icon-512.png» inkscape ./icon.svg —export-width=192 —export-filename=»./icon-192.png»

Шаг 4: Оптимизация SVG и PNG файлов

Лучшее средство для оптимизации svg — это SVGO. Чтобы использовать его, запустите:

npx svgo —multipass icon.svg

Squoosh — отличное веб-приложение для оптимизации растровых изображений:

• Откройте icon-512.png в Squoosh.
• Измените настройку сжатия на OxiPNG.
• Включите уменьшение палитры: “Reduce palette”.
• Установите 64 цвета.
• Сравните «до« и »после», перемещая ползунок. Если вы видите разницу, увеличьте количество цветов.
• Сохраните файл. Повторите эти действия для icon-192.png и apple-touch-icon. png.

Шаг 5: Добавление иконок в HTML

Вам нужно добавить ссылки в favicon.ico и в apple-touch-icon.png в ваш HTML.

Для статического HTML:

<title>My website</title> + <link rel=»icon» href=»/favicon.ico»> + <link rel=»icon» href=»/icon.svg» type=»image/svg+xml»> + <link rel=»apple-touch-icon» href=»/apple-touch-icon.png»>

Шаг 6: Создание web app manifest

Для статического HTML создайте JSON-файл с именем: manifest. webmanifest:

{ «name»: «My website», «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

И добавьте в свой html-файл:

<title>My website</title> + <link rel=»manifest» href=»/manifest.webmanifest»> <link rel=»icon» href=»/favicon.ico»> <link rel=»icon» href=»/icon. svg» type=»image/svg+xml»> <link rel=»apple-touch-icon» href=»/apple-touch-icon.png»>

При работе с Webpack вы можете использовать плагин webpack-pwa-manifest:

plugins: [ …, new WebpackPwaManifest({ name: ‘My website’, icons: [ { src: resolve(‘./icon-192.png’), sizes: ‘192×192’ }, { src: resolve(‘./icon-512.png’), sizes: ‘512×512 } ] }) ]

Спасибо вам за чтение! С современными веб-стандартами легко создать свой набор значков даже руками. Но это не значит, что мы против автоматизации. Если у вас есть, что добавить к набору иконок — пишите мне в Твиттер.

Автор: Андрей Ситник

Сайт, twitter

Перевод: Михаил Гок

Генератор иконок по заветам этой статьи.

Международное общество публичного права

Крупнейшее и ведущее научное общество в мире по всем областям публичного права — административному праву, конституционному праву, международному праву и многим другим.

ГЛОБАЛЬНАЯ СВЯЗЬ

Членство

Членство в ICON•S — это больше, чем ассоциация с научным обществом мирового уровня. Членство делает вас партнером в защите ценностей публичного права во всем мире. Кроме того, членство открывает двери для связи и сотрудничества с тысячами других членов в каждом регионе мира. Это также дает вам право посещать нашу ежегодную мегаконференцию, голосовать на выборах в наш Совет и участвовать в наших эксклюзивных мероприятиях только для членов.

Присоединяйтесь к нам сегодня, чтобы продемонстрировать свою поддержку миссии ICON•S.

СОБЫТИЕ ГОДА

Ежегодная конференция

Ежегодная конференция составляет основу деятельности ICON•S. Эта мегаконференция предлагает стимулирующий, вдохновляющий и гостеприимный форум для глобального сообщества ученых в области публичного права, судей и практиков, где они могут собираться, обмениваться идеями и налаживать сотрудничество. Ежегодная конференция, объединяющая сотни людей со всего мира, включает пленарные заседания, параллельные панели и общественные мероприятия, чтобы сделать мир публичного права более глобальным, более инклюзивным и более взаимосвязанным.

Ежегодная конференция ICON•S 2024

Будущее публичного права: устойчивость, устойчивость и искусственный интеллект

Юридический факультет Университета IE, Мадрид, Испания
8–10 июля 2024 г.

  90 003

Нажмите здесь или следите за нами в наших официальных социальных сетях, чтобы быть в курсе конкурса документов и других новостей о нашей ежегодной феерии в области публичного права!

СЕТЬ И СОТРУДНИЧЕСТВО

Отделения

Семейство ICON•S включает в себя широкий спектр национальных и региональных отделений, а также групп по интересам. Национальные и региональные отделения способствуют научному сотрудничеству и налаживанию связей в конкретных регионах или странах в поддержку миссии ICON•S. Наши отделения существуют или формируются в настоящее время во всех регионах мира. Мы приветствуем выражение заинтересованности в создании новых отделений, будь то национальных или региональных.

Группы интересов

Группы по интересам структурированы вокруг конкретных тем или проблем публичного права. Они ориентированы на устойчивое сотрудничество, например, совместные исследовательские проекты или публикации среди членов ICON•S из разных стран или регионов. Наши группы интересов охватывают все области публичного права. Мы стремимся поддерживать создание новых групп по интересам.

БУДЬТЕ В СООТВЕТСТВИИ

Новости

Узнайте о наших мероприятиях, блогах, главах, наградах, конкурсах статей и других новостях о Международном обществе публичного права.

| Приз за лучшую статью присуждается редакцией Международного журнала конституционного права | Как мог бы выглядеть плюралистический институциональный подход к толкованию конституции? Some…

Подробнее

Комитет по книжным премиям 2023 года решил присудить особое упоминание двум исключительно хорошо написанным книгам. Теория африканского конституционализма (OUP, 2021) профессора Берихуна Адугны…

Подробнее

Книжная премия ICON•S 2023 года присуждается за книгу Сильвии Сутеу о вечности в демократическом конституционализме (OUP 2021). « Оговорки о вечности в демократическом конституционализме бросают вызов общепринятому мнению, согласно которому оговорки о вечности…

Подробнее

ЗНАЧОК•S | Международное общество публичного права

40 Washington Square South
New York, NY 10012
United States

© 2023 ICON•S

Icon — Chakra UI

Chakra предоставляет набор часто используемых значков интерфейса, которые вы можете использовать в своем проекте

Source@chakra-ui/icon

Установка# 9001 0

Чакра обеспечивает набор часто используемых значков интерфейса, которые вы можете использовать в своих проект.

Эти значки опубликованы в отдельном пакете, который не является частью @chakra-ui/react по умолчанию.

 
 нпм я @chakra-ui/icons 
 

Usage#

Chakra предоставляет несколько способов использования значков в вашем проекте:

• Использование библиотеки значков пользовательского интерфейса Chakra
• Использование сторонней библиотеки значков
• Создание собственных иконок

🚨 Избегайте передачи обработчиков onClick компонентам значков. Если вам нужен кликабельный значок, используйте IconButton вместо.

 
 import { PhoneIcon, AddIcon, WarningIcon } from '@chakra-ui/icons' 
 
 // Размер значка по умолчанию 1em (16px) 
 
  
 
 // Используйте свойство `boxSize` для изменения размера значка 
 
  
 
 // Используйте свойство `color` для изменения цвета значка 
 
 < WarningIcon w={8} h={8} color="red.500" /> 
 

Все значки#

Ниже приведен список всех значков в библиотеке вместе с соответствующими имена компонентов:

Использование сторонней библиотеки значков #

Чтобы использовать сторонние библиотеки значков, такие как react-icons , вот шаги:

1. Импорт компонента Icon из @chakra-ui/react
2. Передайте нужный сторонний значок в как prop

 
 // 1. Импорт 
 
 import { Icon } из '@chakra-ui/react' 
 
 import { MdSettings } из 'react-icons/md' 
 
 // 2.  Используйте реквизит `as` 
 
 function Example() { 
 
 return  
 
 } 
 

Некоторые примеры#

 
  
 
 {/* Размер значка по умолчанию — 1em (16 пикселей) */} 
 
  
 
 {/* Используйте ` boxSize` для изменения размера значка */} 
 
  
 
 {/* Используйте свойство `color` для изменения цвета значка */} 
 
  
 
  
 

Создание собственных значков #

Chakra предоставляет два метода создания пользовательских значков:

• Использование компонента Icon
• Использование функции createIcon

Их можно импортировать из @chakra-ui/react :

 
 0111 позволяют стилизовать значок с помощью
стильный реквизит. 
 
 Использование компонента 
 Icon  №  
 9Компонент 0110 Icon  отображается как элемент  svg .  
 
 
  
 
  
 fill='currentColor' 
 
 d='M 100, 100 м -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0' 
 
 /> 
 
  
 
 Это позволяет вам определить свои собственные компоненты значков:
 
 const CircleIcon = (реквизит) => ( 
 
  
 
  
 fill='currentColor' 
 
 d='M 100, 100 м -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0' 
 
 /> 
 
  
 
 ) 
 
 И стилизуйте их с помощью стилей:
 
  
 
 {/* Размер значка по умолчанию – 1em (16 пикселей) */} 900 03 
 <Значок круга / > 
 
 {/* Используйте параметр `boxSize`, чтобы изменить размер значка */} 
 
  
 
 {/* Используйте параметр `color`, чтобы изменить цвет значка */} 
 
  
 
  
 
 Использование функции 
 createIcon #
 Функция  createIcon  представляет собой удобную обертку в течение всего процесса
генерация иконок с помощью  Icon  , позволяющая добиться той же функциональности
с меньшими усилиями.
 
 import { createIcon } from '@chakra-ui/icons' 
 
 // использование `path` 
 
 export const UpDownIcon = createIcon({ 
 
 displayName: 'UpDownIcon', 
 
 viewBox: '0 0 200 200', 
 
 // путь также может быть массивом элементов, если у вас есть несколько путей, линий, форм и т. д. 
 
 путь: ( 
 
  
 fill='currentColor' 
 
 d='M 100, 100 м -75, 0 и 75,75 0 1,0 150,0 и 75,75 0 1,0 -150,0' 
 
 /> 
 
 ), 
 
 }) 
 
 // ИЛИ прямое использование значения `d` пути (определения пути) 
 
 export const UpDownIcon = createIcon({ 
 
 displayName: 'UpDownIcon', 
 
 viewBox: '0 0 200 200', 
 
 d: 'M 100, 100 м -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1 ,0 -150,0', 
 
 }) 
 
 Советы по созданию собственных иконок# 
 Экспорт иконок в формате  svg  из Figma,
Эскиз и др.
 Используйте такой инструмент, как SvgOmg, чтобы уменьшить
размер и минимизировать разметку.