finding-free-icons

Поиск и использование бесплатных иконок и ресурсов для расширений

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

Ресурсы для поиска бесплатных иконок:

• Flaticon: Огромная база векторных иконок в различных стилях. Многие иконки доступны бесплатно (с указанием авторства).
• Iconfinder: Еще один большой ресурс с иконками. Есть как бесплатные, так и платные варианты. Фильтруйте поиск по "Free" для бесплатных иконок.
• The Noun Project: Библиотека иконок, ориентированная на символы и пиктограммы. Многие иконки бесплатны (с указанием авторства).
• Icons8: Большая коллекция иконок, иллюстраций, фотографий и музыки. Бесплатный тарифный план с ограничениями.
• Material Design Icons: Набор иконок в стиле Material Design от Google. Бесплатные и с открытым исходным кодом.
• Font Awesome: Популярный набор векторных иконок, которые можно использовать как шрифты или SVG. Бесплатная версия доступна.

Советы по выбору иконок:

• Размер и формат: Для расширений Chrome обычно используются иконки в формате PNG размерами 16x16, 32x32, 48x48, 128x128 пикселей. Убедитесь, что выбранные иконки доступны в нужных размерах или их можно легко масштабировать.
• Стиль: Выберите иконки, которые соответствуют стилю вашего расширения и общей стилистике Chrome.
• Цвет: Иконки должны быть хорошо видны на светлом и темном фоне панели инструментов Chrome. Рассмотрите использование прозрачного фона.
• Лицензия: Внимательно читайте лицензию на использование иконок. Большинство бесплатных ресурсов требуют указания авторства (упоминания автора и ресурса в описании расширения или в файле README).

Как использовать иконки в расширении:

1. Скачайте иконки: Найдите подходящие иконки на одном из ресурсов, скачайте их в формате PNG и нужных размерах.
2. Создайте папку images: В папке вашего расширения создайте папку с названием images.
3. Поместите иконки в папку images: Скопируйте скачанные иконки в папку images и переименуйте их в соответствии с размерами (например, icon16.png, icon48.png, icon128.png).
4. Укажите пути к иконкам в manifest.json: В секциях "action" (default_icon) и "icons" файла manifest.json укажите пути к вашим иконкам относительно папки images. (Примеры уже были в теме 1).

Другие бесплатные ресурсы:

• Бесплатные изображения и иллюстрации: Unsplash, Pexels, Pixabay – для фоновых изображений, иллюстраций для всплывающих окон или страниц настроек (если необходимо).
• Бесплатные шрифты: Google Fonts, Font Squirrel – для улучшения типографики в UI расширения.
• Бесплатные звуки и музыка: Freesound, Bensound – для звуковых эффектов или фоновой музыки (если применимо).

Практическое задание:

5. Найдите набор бесплатных иконок для расширения "Привет, мир!" на Flaticon или Iconfinder.
6. Скачайте иконки разных размеров (16x16, 48x48, 128x128) в формате PNG.
7. Создайте папку images в папке расширения и поместите туда иконки.
8. Обновите manifest.json расширения "Привет, мир!", указав пути к новым иконкам в секциях "action" и "icons".
9. Обновите расширение в Chrome и проверьте, что иконка расширения изменилась.