@uifabric/file-type-icons - текущий пакет, содержащий набор сопоставлений значков типов файлов. Он включает помощника регистрации и несколько функций для получения заданного расширения для отображения изображения.
@uifabric/styling содержит общий помощник значков getIcon для извлечения зарегистрированных значков из любых регистраций значков.
Я сделал здесь пример кода и коробки, используя vanilla JS: https://codesandbox.io/s/uifabric-filetypeicons-example-yoyp6
... и более понятный более интерактивный пример в React: https://codesandbox.io/s/file-type-icons-2s54c
Важные шаги:
- Позвоните
initializeFileTypeIcons, чтобы зарегистрировать значки типов файлов в реестре значков. - Позвоните
getIconProps({ extension: 'docx', size: 16 }), чтобы получить подробную информацию о iconName для сопоставления с. - Позвоните
getIcon, чтобы получить подробную информацию о значке, где вы можете получить доступ к URL-адресу, который вы можете вставить в raw HTML или использовать выбранный вами каркас для визуализации изображения. .
Обратите внимание, что пакет стилей имеет одноранговую зависимость от React, поэтому мне нужно было добавить его, но он здесь не используется. Это то, что мы могли бы улучшить.
Надеюсь, это поможет.