Введение

IconPark предоставляет более 2000 высококачественных иконок и предоставляет интерфейс для их настройки. В отличие от решений, использующих различные SVG-файлы для достижения эффекта смены скинов, мы внедрили инновационную технологию, позволяющую преобразовывать один SVG-файл в различные темы. Поддерживается экспорт в библиотеки иконок для различных платформ, что позволяет легко интегрировать их в код в виде компонентов, таких как react-icons, vue-icons и svg-icons. Таким образом, IconPark подходит как для дизайнеров, так и для разработчиков в их проектах.

Библиотеки кода

Разнообразные пакеты кода

Их можно найти в папке packages. Они могут быть использованы в различных типах проектов, таких как React, Vue и мини-программы.

Различные темы

Основные изменения скина могут быть достигнуты путём установки двух свойств на элементе: fill и stroke. Fill устанавливает цвет внутри объекта, а stroke — цвет линии, рисующей объект. Изменяя эти два свойства разных путей, можно преобразовать исходный SVG-файл в разные темы, включая контур, заливку, двухцветный и многоцветный. Рассмотрим пример значка «фотоаппарат»:

Исходный файл:

После преобразования, например, в библиотеке иконок React:

Библиотека иконок React	Предварительный просмотр	Соответствующая тема
<Camera theme="outline" size="32" fill="#000000"/>		Контурная тема
<Camera theme="filled" size="32" fill="#333"/>		Заливка темы
<Camera theme="two-tone" size="32" fill={['#333' ,'#2F88FF']}/>		Двухцветная тема
<Camera theme="multi-color" size="32" fill={['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']}/>		Многоцветная тема

Интеграция IconPark в ваш проект

Если вашему проекту требуется использовать информацию о названии, авторе, категории, тегах и дате создания каждого значка, вы можете использовать файл icons.json, расположенный в корневом каталоге каждого NPM.

Веб-сайт

Настройка

Здесь находится веб-сайт IconPark (http://iconpark.bytedance.com/official), где каждый значок нарисован вручную на сетке размером 48*48. Используя свойства границ SVG, обеспечивается максимальная гибкость стилей. Вы можете изменять цвет, размер, ширину контура, тип конечной точки и тип точки излома в режиме онлайн.

Удобство использования

Вы можете применять его в Figma, Sketch, Photoshop, PPT и других сценариях. Здесь есть несколько быстрых операций:

• Копировать SVG-исходный код
• Скопировать компонент React для иконки
• Скопировать компонент Vue для иконки
• Скачать PNG
• Загрузить SVG

История изменений

CHANGELOG.en-US | CHANGELOG.zh-CN