@vkontakte/[email protected]

Улучшения

Добавлена возможность создавать спрайты из растровых изображений (#893, также см. @vkontakte/[email protected]).

Используйте makeRasterIcon() для создания растровой иконки, который возвращает React компонент.

Для категорий разрешений используется именование из 🔗 Android

import { ImgHTMLAttributes, Ref } from 'react';
import { makeRasterIcon } from '@vkontakte/icons-sprite';
import lightmdpi from '.. / ../../src/png/28/drawable-mdpi/verified_light_28.png';
import darkmdpi from ' ../../../src/png/28/drawable-mdpi/verified_dark_28.png';
import lighthdpi from '../../../src/png/28/drawable-xhdpi/verified_light_28.png';
import darkxhdpi from ' ../../../src/png/28/drawable-xhdpi/verified_dark_28.png';
import lightxxhdpi from '../../../src/png/28/drawable-xxhdpi/verified_light_28.png';
import darkxxhdpi from ' ../../../src/png/28/drawable-xxhdpi/verified_dark_28.png';

export interface RasterIcon28VerifiedProps extends ImgHTMLAttributes<HTMLImageElement> {
  getRootRef?: Ref<HTMLImageElement>;
}

export const RasterIcon28Verified = makeRasterIcon<RasterIcon28VerifiedProps>(
  'RasterIcon28Verified',
  'verified',
  28,
  { lightmdpi, darkmdpi, lighthdpi, darkxhdpi, lightxxhdpi, darkxxhdpi },
);

Для смены иконки на light/dark в зависимости от цветовой схемы, используйте провайдер IconAppearanceProvider. Его стоит разово определить в корне вашего проекта. Далее все RasterIcon получат apperance из контекста.

import { IconAppearanceProvider } from '@vkontakte/icons-sprite';

const App = ({ children }) => {
  const apperance = 'light'; /* здесь предполагается, что будет хук определяющий цветовую схему */;
  return (
    <IconAppearanceProvider value={apperance}>
      {children}
    </IconAppearanceProvider>
  );
};

---

Полный список изменений: https://github.com/VKCOM/icons/compare/@vkontakte/[email protected]...@vkontakte/[email protected]