Об этом проекте

# Ionicons [Ionicons](http://ionicons.com/) — это полностью открытый набор иконок, включающий 1300 иконок, созданных для веб, iOS, Android и настольных приложений. Ionicons был разработан для [Ionic Framework](https://ionicframework.com/), поэтому иконки имеют версии как Material Design, так и iOS. Примечание: Все брендовые иконки являются товарными знаками их владельцев. Использование этих товарных знаков не означает одобрение владельца товарного знака компанией Ionic, и наоборот. Мы предполагаем, что этот набор иконок будет использоваться с [Ionic](http://ionicframework.com/), но он не ограничивается только этим. Используйте их где угодно, как в личных, так и в коммерческих целях. Они бесплатны для использования и лицензированы под [MIT](http://opensource.org/licenses/MIT). ## Вклад Спасибо за ваш интерес к участию! Ознакомьтесь с нашими рекомендациями по [внесению вклада](https://github.com/ionic-team/ionicons/blob/main/CONTRIBUTING.md) и затем просмотрите наши задачи с меткой [help wanted](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22). ## Использование веб-компонента Веб-компонент Ionicons — это простой и производительный способ использования Ionicons в вашем приложении. Компонент будет динамически загружать SVG для каждой иконки, поэтому ваше приложение запрашивает только те иконки, которые вам нужны. Также обратите внимание, что загружаются только видимые иконки, а иконки, которые находятся "ниже сгиба" и скрыты от глаз пользователя, не отправляют запросы на получение svg-ресурса. ### Установка Если вы используете [Ionic Framework](https://ionicframework.com/), Ionicons поставляется по умолчанию, поэтому установка не требуется. Хотите использовать Ionicons без Ionic Framework? Поместите следующий `<script>` в конец вашей страницы, сразу перед закрывающим тегом `</body>`, чтобы включить их. ```html <script type="module" src="https://esm.sh/ionicons@latest/loader"></script> <script nomodule src="https://esm.sh/ionicons@latest/loader"></script> ``` Вы можете заменить `latest` на любую версию Ionicons, например: ```html <script type="module" src="https://esm.sh/ionicons@8.0.0/loader"></script> <script nomodule src="https://esm.sh/ionicons@8.0.0/loader"></script> ``` ### Базовое использование Чтобы использовать встроенную иконку из пакета Ionicons, заполните атрибут `name` в компоненте ion-icon: ```html <ion-icon name="heart"></ion-icon> ``` ### Пользовательские иконки Чтобы использовать пользовательский SVG, укажите его URL в атрибуте `src`, чтобы запросить внешний SVG-файл. Атрибут `src` работает так же, как `<img src="...">`, в том смысле, что URL должен быть доступен с веб-страницы, которая отправляет запрос на изображение. Кроме того, внешний файл может быть только допустимым SVG и не допускает скриптов или событий внутри элемента svg. ```html <ion-icon src="/path/to/external/file.svg"></ion-icon> ``` #### Пользовательский путь к ресурсам Если у вас есть другой набор иконок, который вы хотите загрузить, или если иконки Ionicons размещены на другой странице или пути, вы можете установить URL ресурсов, из которых Ionicons загружает иконки, с помощью: ```ts import { setAssetPath, addIcons } from 'ionicons'; import { add, logoIonic, save } from 'ionicons/icons'; // установить корневой путь для загрузки иконок в "<root>/public/svg" setAssetPath(`${window.location.origin}/public/svg/`); // загружать только определенные иконки addIcons({ add, logoIonic, save }); ``` Это позволяет использовать именованные иконки следующим образом: ```html <!-- теперь загружает svg из "<root>/public/svg/heart.svg" --> <ion-icon name="heart"></ion-icon> ``` ## Варианты Каждая иконка приложения в Ionicons имеет варианты `filled`, `outline` и `sharp`. Эти различные варианты предоставляются, чтобы сделать ваше приложение нативным для различных платформ. Вариант filled использует имя по умолчанию без суффикса. Примечание: Логотипы не имеют вариантов outline или sharp. ```html <ion-icon name="heart"></ion-icon> <!--filled--> <ion-icon name="heart-outline"></ion-icon> <!--outline--> <ion-icon name="heart-sharp"></ion-icon> <!--sharp--> ``` ### Специфика платформы При использовании иконок в Ionic Framework вы можете указать разные иконки для каждой платформы. Используйте атрибуты `md` и `ios` и укажите имя иконки/варианта, специфичное для платформы. ```html <ion-icon ios="heart-outline" md="heart-sharp"></ion-icon> ``` ## Размер Чтобы указать размер иконки, вы можете использовать атрибут size для наших предопределенных размеров шрифта. ```html <ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon> ``` Или вы можете установить конкретный размер, применив CSS-свойство `font-size` к компоненту `ion-icon`. Рекомендуется использовать размеры в пикселях, кратные 8 (8, 16, 32, 64 и т.д.) ```css ion-icon { font-size: 64px; } ``` ## Цвет Укажите цвет иконки, применив CSS-свойство `color` к компоненту `ion-icon`. ```css ion-icon { color: blue; } ``` ## Ширина обводки При использовании варианта иконки `outline` можно настроить ширину обводки для улучшения визуального баланса относительно размера иконки или ширины соседнего текста. Вы можете установить конкретный размер, применив CSS-свойство `--ionicon-stroke-width` к компоненту `ion-icon`. Значение по умолчанию — 32px. ```html <ion-icon name="heart-outline"></ion-icon> ``` ```css ion-icon { --ionicon-stroke-width: 16px; } ``` ## Миграция с v4 Смотрите [примечания к выпуску 5.0](https://github.com/ionic-team/ionicons/releases/tag/5.0.0) для списка удаленных/переименованных иконок. ## Лицензия Ionicons лицензирован под [лицензией MIT](http://opensource.org/licenses/MIT). ## Связанные проекты * [Домашняя страница Ionicons](http://ionicons.com/) * [Ionic Framework](https://ionicframework.com/) * [Ionic Discord](https://ionic.link/discord) * [Ionic Forum](https://forum.ionicframework.com/) * [Stencil](https://stenciljs.com/) * [Capacitor](https://capacitorjs.com/)