Иконки Fluent UI System

Описание иконок

Иконки Fluent UI System представляют собой набор из более чем 1000 иконок, которые можно использовать для создания визуально привлекательных и интуитивно понятных пользовательских интерфейсов. Эти иконки доступны в различных форматах, включая SVG, PNG и Web Font.

Как использовать иконки

Чтобы использовать иконки Fluent UI System в вашем проекте, выполните следующие шаги:

1. Установите пакет иконок с помощью npm:

   npm install @fluentui/react-icons

2. Импортируйте иконки в вашем компоненте:

   import { MailIcon } from '@fluentui/react-icons';

3. Используйте иконки в вашем коде:

   <MailIcon />

Список иконок

Вот некоторые из доступных иконок:

• MailIcon
• CalendarIcon
• SearchIcon
• HomeIcon
• SettingsIcon

Примеры использования

Пример 1: Использование иконки в компоненте

import React from 'react';
import { MailIcon } from '@fluentui/react-icons';

const MyComponent = () => {
  return (
    <div>
      <MailIcon />
    </div>
  );
};

export default MyComponent;

Пример 2: Использование иконки в кнопке

import React from 'react';
import { SearchIcon } from '@fluentui/react-icons';

const MyButton = () => {
  return (
    <button>
      <SearchIcon />
    </button>
  );
};

export default MyButton;

Поддержка

Если у вас возникли проблемы или вопросы, пожалуйста, свяжитесь с нами через GitHub Issues.

Лицензия

Иконки Fluent UI System распространяются под лицензией MIT.

Тип документа для перевода: markdown
Язык исходного текста: английский
Язык финального текста: русский ! Проверка pull request Иконки Fluent UI System — это коллекция знакомых, дружелюбных и современных иконок от Microsoft. ! Иконки Fluent System

Список иконок

• Просмотр полного списка обычных иконок
• Просмотр полного списка заполненных иконок

Направление

В файле метаданных metadata.json для иконки используется свойство directionType, чтобы указать направление иконки. Это свойство может иметь одно из следующих значений:

• unique, что означает, что иконка уникальна и имеет конкретную версию для RTL и LTR
• mirror, что означает, что иконка может быть отражена для RTL или LTR языков Свойство singleton также используется для указания по умолчанию направления, которое должно использоваться для иконки.

Установка

Android

Библиотека публикуется через Maven Central, убедитесь, что репозиторий mavenCentral() добавлен в файл build.gradle на уровне корня:

repositories {
    ...
    mavenCentral()
}

Включите следующую зависимость в ваш проект build.gradle:

implementation 'com.microsoft.design:fluent-system-icons:1.1.302@aar'

Для документации библиотеки, см. android/README.md.

iOS и macOS

CocoaPods

use_frameworks!
pod "FluentIcons", "1.1.302"

Carthage

git "git@github.com:microsoft/fluentui-system-icons.git" "1.1.302"

Для документации библиотеки, см. ios/README.md.

Flutter

В файле pubspec.yaml вашего проекта Flutter добавьте следующую зависимость:

dependencies:
  fluent_system_icons: 1.1.302
```dependencies:
  .  .  .
  fluentui_system_icons: ^1.1.302

Для документации библиотеки, см. flutter/README.md.

Простые svg

Встраиваемые svg напрямую. См. packages/svg-icons/README.md.

Вклад

Импортер

Импортер генерирует библиотеки для Android и iOS из иконок в директории assets. Перейдите в директорию:

cd importer

Установите зависимости npm:

npm install
npm run clean

Список всех доступных команд:

npm run

Построение конвейера

Наш конвейер сборки выполняет deploy:android и deploy:ios, чтобы создать библиотеки. Определения сборки находятся в .github/workflows/.

Примерные приложения

Вы можете собрать и запустить примерные приложения, следуя шагам ниже.

Android

1. Следуйте разделу Импортер выше и выполните команду npm run deploy:android
2. Откройте android директорию в Android Studio
3. Выберите sample-showcase в выпадающем списке конфигурации сборки
4. Нажмите кнопку "Запустить"

Flutter

Предварительное условие: Убедитесь, что Flutter настроен в Android Studio

1. Откройте flutter директорию в Android Studio
2. Выберите example в директории и откройте его в Android Studio
3. Нажмите кнопку "Запустить"

Контакты

Пожалуйста, не стесняйтесь открыть GitHub issue и назначить следующим контактам с вопросами или запросами.

• Джейсон Кастер(@jasoncuster) / Спенсер Нельсон(@spencer-nelson)com/spencer-nelson)) / Джо Вудвард(@thewoodpecker) - Дизайн
• Ник Романо(@rickromano) - iOS
• Уильям Хау(@willhou) - Android
• Акашдееп Сингх(@aakash1313) - Flutter

Код поведения

Этот проект использует Microsoft Open Source Code of Conduct.
Для получения дополнительной информации см. FAQ по коду поведения или свяжитесь с opencode@microsoft.com с любыми дополнительными вопросами или комментариями.