Как добавить собственное изображение `PNG` к значку пользовательского интерфейса материала - PullRequest
Новая
       9

Как добавить собственное изображение `PNG` к значку пользовательского интерфейса материала

0 голосов
/ 25 апреля 2018

Я использую material-ui @ next для своего приложения реакции.Я хочу использовать компонент Icon с динамическими изображениями в формате png.Я гуглил это, но не могу найти ничего полезного.

Ответы [ 2 ]

0 голосов
/ 08 марта 2019

В итоге я использовал Gimp для этого.Вот шаги, которые я использовал:

  1. Создайте изображение в Gimp и выберите содержимое значка.
  2. После того, как ваш значок выбран, перейдите к Select-> To Path.Это создает векторную траекторию вашего выбора.

Далее вам нужно убедиться, что он правильно масштабирован до 24x24 пикселей.У пути есть свое окно инструментов.Обычно он находится рядом с окнами слоев и каналов.

Дважды щелкните путь, созданный на шаге 2, и убедитесь, что он выбран. Выберите Инструмент масштабирования .Также измените выбор преобразования в масштабе.Это третий значок в списке после преобразования в параметрах инструмента масштабирования. После того, как инструмент масштабирования выбран и настроен, щелкните путь или нажмите Ctrl + S, чтобы открыть окно масштабирования. Введите пиксели 24x24 и нажмите ввод для масштабирования. Щелкните правой кнопкой мыши новый масштабированный путь в наборе инструментов путей и выберите путь экспорта. Откройте экспортированный файл и скопируйте тег пути внутритег svg.Кроме того, удалите любые другие атрибуты в теге пути, кроме атрибута d.Атрибуты заливки и обводки не нужны.

Создайте новый файл и добавьте новый тег пути, который указан ниже {вставить тег пути здесь} 

import * as React from 'react';
import createSvgIcon from '@material-ui/icons/utils/createSvgIcon';

export default createSvgIcon(
  <React.Fragment>
    <path fill='none' d='M0 0h24v24H0z' />
    {paste path tag here}
  </React.Fragment>,
  'NewIcon'
);

Используйте свой значок следующим образом:

Импорт как: 

import NewIcon from './filename.tsx';

Затем используйте как: 

<NewIcon/>
0 голосов
/ 24 мая 2018

Вы можете сохранить изображения PNG в формате BMP, а затем преобразовать их в формат SVG с помощью приложения potrace . 

potrace icon1.bmp -s -o icon1.svg

Теперь вы можете использовать компонент SvgIcon. откройте файл svg с помощью блокнота и скопируйте теги из тега svg и поместите его в SvgIcon: 

function Icon1(props) {
return (
<SvgIcon {...props} >
// tags in your svg file
// ex: <path d="M81 1032 c-19 -9 "/>
</SvgIcon>
);
}

Ваш компонент значка готов: 

<Icon1 />
...