Bootstrap Icons

Официальная библиотека SVG-иконок с открытым исходным кодом для Bootstrap, содержащая более 2000 иконок.
[RU] Обзор Иконок Bootstrap » | [EN] Explore Bootstrap Icons »

[RU] Bootstrap | [EN] Bootstrap · Темы · [RU] Блог | [EN] Blog

Установка

Иконки Bootstrap упаковываются и публикуются в npm. Мы включаем в этот пакет только обработанные SVG - для Вас и Вашей команды. Прочтите нашу документацию для получения инструкций по использованию.

npm i bootstrap-icons

Для тех, кто использует Packagist, вы также можете установить значки Bootstrap через Composer:

composer require twbs/bootstrap-icons

Также доступно в Figma.

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

В зависимости от Ваших настроек Вы можете включать иконки Bootstrap несколькими способами.

• Копировать и вставлять SVG как встроенный HTML
• Ссылка через элемент <img>
• Использовать спрайт SVG
• Включить через CSS

Смотрите документацию для получения дополнительной информации.

Разработка

Клонируйте репозиторий, установите зависимости и запустите сервер Hugo локально.

git clone https://github.com/twbs/icons/
cd icons
npm i
npm start

Затем откройте в браузере http://localhost:4000.

Скрипты npm

Вот несколько ключевых сценариев, которые вы будете использовать во время разработки. Обязательно просмотрите наши выходные данные package.json или npm run, чтобы получить полный список скриптов.

Скрипт	Описание
start	Псевдоним для запуска docs-serve
docs-serve	Запускает локальный сервер Hugo
pages	Создает страницы с постоянными ссылками для каждой иконки с помощью шаблона Markdown
icons	Обрабатывает и оптимизирует SVG в каталоге icons

Добавление SVG

Иконки обычно добавляются только с помощью @mdo, но могут быть сделаны исключения. Новые глифы разрабатываются в Figma сначала в сетке 16x16 пикселей, а затем экспортируются как плоские SVG с заливкой fill (без обводки). После того, как новый значок SVG был добавлен в каталог icons, мы используем сценарий npm, чтобы:

1. Оптимизируйте наши SVG с помощью SVGO.
2. Измените исходный код SVG, удалив все атрибуты перед установкой новых атрибутов и значений в предпочтительном порядке.

Используйте npm run icons для запуска скрипта, запустите npm run pages для создания страниц с постоянными ссылками, заполните эти страницы и, наконец, зафиксируйте результаты в новой ветке для обновления.

Warning: Please exclude any auto-generated files, like font/** and bootstrap-icons.svg from your branch because they cause conflicts, and we generally update the dist files before a release.

Публикация

Документация публикуется автоматически при публикации нового тега Git. Смотрите наши GitHub Actions и package.json для получения дополнительной информации.

Лицензия

MIT

Автор

@mdo