Как использовать кастомные иконки в vkui?

[svyatoslavpavlov]

Есть ли возможность оборачивать свои svg иконки так, чтобы внутри vkui было идентичное поведение? Или нужно делать форк и паблишить со своими иконками в свой репозиторий?

[inomdzhon]

Привет,

Можно создать себе вот такой компонент

import React from 'react';

export interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
  width?: number;
  height?: number;
  getRootRef?: React.Ref<SVGSVGElement>;
  title?: string;
}

const SvgIcon = ({
  width = 0,
  height = 0,
  display = 'block',
  'aria-hidden': ariaHidden = true,
  iconId,
  className,
  fill,
  getRootRef,
  'style': propsStyle,
  title,
  children,
  ...restProps
}: SvgIconProps) => {
  const size = Math.max(width, height);

  const style = {
    width,
    height,
    ...propsStyle,
  };

  return (
    <svg
      aria-hidden={ariaHidden}
      display={display}
      className={[
        'vkuiIcon',
        `vkuiIcon--${size}`,
        `vkuiIcon--w-${width}`,
        `vkuiIcon--h-${height}`,
        className,
      ]
        .join(' ')
        .trim()}
      width={width}
      height={height}
      style={{ fill: 'currentColor', color: fill, ...style }}
      ref={getRootRef}
      {...restProps}
    >
      {title && <title>{title}</title>}
      {children}
    </svg>
  );
};

а потом

const Icon12SomeName = (props: SvgIconProps) => (
  <SvgIcon width="12" height="12" viewBox="0 0 12 12" {...props}>
    <path d="..." />
  </SvgIcon>
);

const Icon24SomeName = (props: SvgIconProps) => (
  <SvgIcon width="24" height="24" viewBox="0 0 24 24" {...props}>
    <path d="..." />
  </SvgIcon>
);

[svyatoslavpavlov]

благодарю
есть в планах вынести этот компонент для общего пользования, чтоб всегда был одинаков с исходным?

[inomdzhon]

благодарю есть в планах вынести этот компонент для общего пользования, чтоб всегда был одинаков с исходным?

В планах нет, но создал задачку #1011