react-native-iconfont-cli

Преобразует иконки iconfont.cn в компоненты RN с помощью чистого JS, не используя шрифты, поддерживает многоцветность и горячую перезагрузку.

Проблемы

Обычно, чтобы использовать iconfont в RN, мы можем воспользоваться react-native-vector-icons, импортировав ttf-шрифт, или скачать отдельные svg-файлы и использовать их по отдельности.

Использование ttf-шрифтов имеет недостаток — при каждом обновлении иконок требуется обновление ttf-файла и заново сборка приложения. Кроме того, ttf не поддерживает многоцветные иконки, что приводит к тому, что все иконки будут одноцветными. Если вы используете react-native-vector-icons, эта библиотека содержит более десятка ttf-шрифтов, общим размером около 2МБ; возможно, вам не нужны все они, но они всё равно будут собраны в вашем приложении.

Скачивание svg-файлов также имеет свои сложности, так как вам потребуется поддерживать свою собственную коллекцию иконок, что может вызвать проблемы с непоследовательностью между локальной версией и онлайн-версией. Также практически невозможно динамически менять цвет рендера svg, можно рендерить только исходный цвет иконки.

Чтобы решить эти проблемы, я использовал чистый JavaScript для преобразования иконок iconfont в компоненты React, не требуя использования ttf-шрифтов, а также не требуя скачивания иконок на устройство.## Основные характеристики

1. Чистые компоненты, не зависят от шрифтов, имеют небольшой объем.

Шаг 1

Установите плагины

# Yarn
yarn add react-native-svg
yarn add react-native-iconfont-cli --dev

# Npm
npm install react-native-svg
npm install react-native-iconfont-cli --save-dev

Шаг 2

Статическая связь. Обратите внимание на номер версии вашего React-Native.

# RN < 0.60
react-native link react-native-svg

# RN >= 0.60
cd ios && pod install

Шаг 3

Создание конфигурационного файла

npx iconfont-init

При этом в корневой директории проекта будет создан файл iconfont.json, содержащий следующее:

{
    "symbol_url": "Укажите ссылку, предоставленную на сайте [iconfont](http://iconfont.cn). Убедитесь, что это .js файл, а не .css.",
    "use_typescript": false,
    "save_dir": "./src/iconfont",
    "generate_mode": "all-in-one",
    "trim_icon_prefix": "icon",
    "default_icon_size": 18,
    "summary_component_name": "Icon"
}

Описание параметров конфигурации:

symbol_url

Просто скопируйте ссылку на .js файл, предоставляемый сайтом iconfont. Убедитесь, что вы используете правильный тип файла — .js, а не .css. Если у вас ещё нет репозитория iconfont, вы можете использовать этот тестовый URL: http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js

use_typescript

Если ваш проект написан с использованием TypeScript, установите значение в true. Этот параметр определяет, будут ли создаваемые компоненты иконок иметь расширение .tsx или .js.

Когда это значение равно false, мы будем генерировать два файла для ваших иконок — .js и .d.ts, чтобы вы могли получить лучший опыт разработки.

generate_mode

Способ создания компонентов:

1、all-in-one

Генерируется один компонент <Icon name="xxx" />, содержащий информацию обо всех иконах. Поэтому этот компонент будет большим.

2、depends-on

Для каждой иконы создаётся отдельный компонент <IconXXX />. В этом режиме также создаётся компонент Icon, который всегда импортирует остальные компоненты иконок. Он служит своего рода входной точкой.

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

save_dir

Папка, куда будут помещены компоненты, созданные на основе иконок fontello. Перед каждым запуском генерации эта папка очищается.

trim_icon_prefix

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

Обратите внимание, что этот параметр действует только для компонента <Icon />.### default_icon_size Мы добавляем по умолчанию размер шрифта для каждого созданного компонента иконок. Однако вы можете изменить этот размер, передав соответствующее свойство props.

summary_component_name

Имя сводного компонента по умолчанию — Icon. Вы можете заменить его на IconFont или любое другое имя, которое вам нравится. Помните, что это имя должно соответствовать правилам JavaScript для объявления переменных, а также начинаться с большой буквы как название компонента.

Шаг 4

Начните создание стандартных компонентов React Native

npx iconfont-rn

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

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

Теперь мы предлагаем две возможности для внедрения:

1. Используйте сводный компонент Icon:

import Icon from '../src/iconfont/Icon';

export const App = () => {
  return (
    <View>
      <Icon name="alipay" size={20} />
      <Icon name="wechat" />
    </View>
  );
};

2. Когда вы настроили generate_mode=depends-on, вы можете использовать отдельные иконки. Это позволяет избежать включения ненужных иконок в сборку вашего приложения:

import IconAlipay from '../src/iconfont/IconAlipay';
import IconWechat from '../src/iconfont/IconWechat';

export const App = () => {
  return (
    <View>
      <IconAlipay size={20} />
      <IconWechat />
    </View>
  );
};
```### Размер иконок
По конфигурации `default_icon_size`, каждая иконка имеет свой размер по умолчанию, который можно переопределить в любое время.
```typescript jsx
<Icon name="alipay" size={20} />

### Однотонные иконки Однотонные иконки будут отображаться в своём базовом цвете, если цвет не указан. Если вы хотите установить другой цвет, просто укажите его.

Обратите внимание: Если вы передаёте цвет как строку вместо массива в props, то даже многоцветные иконки будут отображаться как однотонные.

<Icon name="alipay" color="зелёный" />

Многоцветные иконки

Многоцветные иконки будут отображаться в своих базовых цветах, если цвет не указан. Если вы хотите установить другие цвета, укажите набор цветов.

<Icon name="alipay" color={['зелёный', 'оранжевый']} />

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

Обновление иконок

При изменении иконок на сайте iconfont.cn вам следует изменить конфигурацию symbol_url и затем выполнить шаг Step 4, чтобы сгенерировать новые компоненты иконок.

# После изменения symbol_url выполните:
npx iconfont-rn

Расширение

Спасибо за использование нашего пакета. Ваш отзыв поможет нам улучшить его.