Иконки MUI в React


Введение

React — это наиболее часто используемый фронтенд-фреймворк для создания отзывчивого веб-интерфейса. Он сопровождается библиотеками, которые обеспечивают элементы средствами совместной работы для эффективного повышения эстетической ценности любого макета веб-дизайна. Некоторые из этих библиотек включают Material UI, Ant Design, React-Bootstrap, Semantic UI, Fluent UI, Blueprint UI и т.д.

Эти библиотеки, будь то компоненты или утилиты, выполняют определенные функции, помогая разработчикам React создавать отзывчивые и красивые веб-структуры. В этой статье мы сосредоточимся на Material UI, изучим его иконки и выделим их функции в приложении React.

Шаги, которые мы рассмотрим:

  • Что такое Material UI?
  • Начало работы с иконками Material UI в React
  • Как применить иконки MUI в вашем проекте
  • API SvgIcon
  • Компонент Icon (иконки шрифтов)
  • Создание трекера задач с помощью React и Material UI
  • Тестирование иконок MUI

Предварительные условия

Чтобы правильно понять содержание этой статьи, вы должны иметь:

  • Тщательное знание HTML, CSS и JavaScript
  • Рабочая установка Node.Js

Что такое Material UI?

Material UI — это библиотека компонентов React с открытым исходным кодом, основанная на Material Design от Google. Она предоставляет полный набор инструментов пользовательского интерфейса, чтобы помочь разработчикам создавать и поддерживать приложения React и эффективно импортировать компоненты в несколько частей своих проектов. С годами все больше разработчиков включают Material UI в пользовательский интерфейс своих проектов, поскольку он значительно упрощает и ускоряет процесс веб-дизайна.

Material UI предлагает компоненты, которые могут служить определенным целям на веб-странице. Некоторые из них включают компоненты формы, компоненты отображения данных, компоненты обратной связи, компоненты навигации, компоненты макета и т.д. Значки Material UI являются ярким примером компонентов отображения данных.

Начало работы с иконками Material UI в React

Иконки Material UI — это готовый набор иконок, которые можно извлечь из системы компонентов MUI и внедрить в любое приложение React. Они обычно используются в панелях инструментов приложений для представления частых операций и действий. Эти иконки облегчают разработчикам создание ярлыков в приложении и заменяют длинные текстовые описания простыми для понимания представлениями.

MUI предлагает три типа поддержки иконок:

  • Унифицированные материальные иконки, которые экспортируются как компоненты React.
  • Компонент SvgIcon — React-обертка для пользовательских SVG-иконок.
  • Компонент Icon — React-обертка для пользовательских иконок шрифтов.

Как применить иконки MUI в вашем проекте

Шаг 1 — Установите библиотеку MUI

Установите библиотеку MUI в ваш проект как часть зависимостей package.json с помощью следующей команды:

npm install @mui/material @emotion/react @emotion/styled
Войти в полноэкранный режим Выйти из полноэкранного режима

или

yarn add @mui/material @emotion/react @emotion/styled
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 2 — Установка пакета MUI Icons

Установите сами иконки MUI в ваш проект с помощью следующей команды:

npm install @mui/icons-material
Enter fullscreen mode Выйти из полноэкранного режима

или

yarn add @mui/icons-material
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь вы должны увидеть обновленные зависимости в файле package.json в таком виде:

Шаг 3 — Импорт иконок

Следующим шагом будет импорт иконок Material UI в нужный каталог проекта с помощью одного из следующих методов:

Вы можете импортировать каждую иконку, которую собираетесь использовать для конкретного компонента React, отдельно, как показано ниже:

import ArrowRight from '@mui/icons-material/ArrowRight'
import Camera from '@mui/icons-material/Camera'
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы можете импортировать их вместе в одном объявлении, как показано здесь:

import { ArrowRight, Camera } from '@mui/icons-material'
Войти в полноэкранный режим Выйти из полноэкранного режима

Каждый значок Material UI поставляется с темой:

  • Заполненный (тема по умолчанию)
  • Очерченный
  • Закругленный
  • Двухцветный
  • Острый

Чтобы использовать тему, отличную от темы по умолчанию, добавьте название темы к имени значка при его импорте. Например, можно импортировать значок «Камера» с темой «Контуры» следующим образом:

 @material-ui/icons/CameraOutlined
Вход в полноэкранный режим Выйти из полноэкранного режима

Шаг 4 — Отображение иконки на DOM

После успешной установки библиотеки MUI и пакета иконок в ваше приложение, вы можете вызвать отдельные иконки в JSX как компонент и экспортировать их в App.js, обеспечив их отображение в виртуальном DOM.

Например, если вы хотите отобразить иконки камер, несущие все основные темы. Вы можете сделать это с помощью приведенного ниже кода:

import React from "react";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import CameraIcon from "@mui/icons-material/Camera";
import CameraOutlinedIcon from "@mui/icons-material/CameraOutlined";
import CameraRoundedIcon from "@mui/icons-material/CameraRounded";
import CameraTwoToneIcon from "@mui/icons-material/CameraTwoTone";
import CameraSharpIcon from "@mui/icons-material/CameraSharp";
import ThreeSixtyIcon from "@mui/icons-material/ThreeSixty";

const Home = () => {
    return (
        <div>
            <Grid container sx={{ color: "text.primary" }}>
                <Grid item xs={4}>
                    <Typography>Filled</Typography>
                </Grid>
                <Grid item xs={8}>
                    <CameraIcon />
                </Grid>
                <Grid item xs={4}>
                    <Typography>Outlined</Typography>
                </Grid>
                <Grid item xs={8}>
                    <CameraOutlinedIcon />
                </Grid>
                <Grid item xs={4}>
                    <Typography>Rounded</Typography>
                </Grid>
                <Grid item xs={8}>
                    <CameraRoundedIcon />
                </Grid>
                <Grid item xs={4}>
                    <Typography>Two Tone</Typography>
                </Grid>
                <Grid item xs={8}>
                    <CameraTwoToneIcon />
                </Grid>
                <Grid item xs={4}>
                    <Typography>Sharp</Typography>
                </Grid>
                <Grid item xs={8}>
                    <CameraSharpIcon />
                </Grid>
                <Grid item xs={4}>
                    <Typography>Edge-cases</Typography>
                </Grid>
                <Grid item xs={8}>
                    <ThreeSixtyIcon />
                </Grid>
            </Grid>
        </div>
    );
};

export default Home;
Войти в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше код демонстрирует, как включить иконку камеры и ее основные темы в стандартный проект React. Затем иконки отображаются как виртуальные компоненты DOM.

Вот результат:

SvgIcon API

Для случаев, когда вам может понадобиться пользовательская SVG-иконка, которая недоступна в спецификациях иконок Material, вы можете использовать обертку SvgIcon. Этот компонент является расширением собственного элемента <svg>:

  • Он имеет встроенную доступность.
  • SVG-элементы имеют размер по умолчанию viewport 24px на 24px, который можно настроить с помощью атрибута viewport.
  • По умолчанию компонент наследует текущий цвет. Вы можете, по своему усмотрению, использовать реквизит color для применения одного из цветов темы.

Ниже приведен простой пример вызова настроенного компонента MUI SvgIcon:

import React from 'react';
import SvgIcon from '@mui/material/SvgIcon';
import CameraIcon from './Components/CameraIcon'

const HomeIcon = (props) => {
  return (
    <div>
    <SvgIcon {...props}>
         <path d="M9.4 10.5l4.77-8.26C13.47 2.09 12.75 2 12 2c-2.4 0-4.6.85-6.32 2.25l3.66 6.35.06-.1zM21.54 9c-.92-2.92-3.15-5.26-6-6.34L11.88 9h9.66zm.26 1h-7.49l.29.5 4.76 8.25C21 16.97 22 14.61 22 12c0-.69-.07-1.35-.2-2zM8.54 12l-3.9-6.75C3.01 7.03 2 9.39 2 12c0 .69.07 1.35.2 2h7.49l-1.15-2zm-6.08 3c.92 2.92 3.15 5.26 6 6.34L12.12 15H2.46zm11.27 0l-3.9 6.76c.7.15 1.42.24 2.17.24 2.4 0 4.6-.85 6.32-2.25l-3.66-6.35-.93 1.6z"/>
   </SvgIcon>
    </div>
  )
}

// And the code for the color setting would look the following way:
<div className={Class.root}>
      <CameraIcon />
      <CameraIcon color="primary" />
      <CameraIcon color="secondary" />
      <CameraIcon color="action" />
      <CameraIcon color="disabled" />
</div>

export default HomeIcon
Вход в полноэкранный режим Выйти из полноэкранного режима

Вот результат:

Компонент Icon (иконки шрифтов)

Компонент Icon отображает любой шрифт иконок, который поддерживает лигатуры. Чтобы использовать иконку, просто заключите ее название в шрифтовую лигатуру компонента Icon.

Вот простая иллюстрация того, как импортировать иконки шрифтов в ваше приложение React с помощью компонента Icon:

import * as React from 'react';
import Box from '@mui/material/Box';
import { green } from '@mui/material/colors';
import Icon from '@mui/material/Icon';

export default function Icons() {
  return (
    <Box
      sx={{
        '& > :not(style)': {
          m: 2,
        },
      }}
    >
      <Icon>camera</Icon>
      <Icon color="primary">camera</Icon>
      <Icon sx={{ color: green[500] }}>camera</Icon>
      <Icon fontSize="small">camera</Icon>
      <Icon sx={{ fontSize: 30 }}>camera</Icon>
    </Box>
  );
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Вот результат

Обратите внимание, как мы можем настроить размер шрифта некоторых иконок.

Вы также можете использовать иконки FontAwesome:

<FontAwesomeIcon icon="fa-solid fa-aperture" />
Войти в полноэкранный режим Выход из полноэкранного режима

Создание трекера задач с помощью React и Material UI

Иконки Material UI — очень динамичный элемент веб-дизайна. Вы можете использовать их для представления команд, действий и каталогов в приложении React. Мы можем продемонстрировать их использование и функции на примере простого приложения, например, трекера задач.

Трекер задач будет состоять из трех компонентов:

  • Компонент Form.
  • компонент Task
  • Компонент TaskList.

Компонент формы

Этот компонент включает элемент ввода, где пользователи могут вводить свои задачи, а также кнопку добавления, представленную иконкой Material UI AddCircleIcon. Он также имеет элемент Select, где пользователи могут настроить трекер задач, отображая задачи, которые были выполнены или те, которые еще предстоит выполнить.

Вот код для компонента Form

import React, { useState } from "react";
import AddCircleIcon from "@mui/icons-material/AddCircle";

const Form = () => {
    const [inputText, setInputText] = useState("");
    const [todos, setTodos] = useState([]);
    const [status, setStatus] = useState("All");
    const [filteredTodos, setFilteredTodos] = useState([]);

    const inputTextHandler = (e) => {
        setInputText(e.target.value);
    };

    const submitTodoHandler = (e) => {
        e.preventDefault();

        setTodos([
            ...todos,
            {
                text: inputText,
                completed: false,
                id: Math.floor(Math.random() * 10000),
            },
        ]);

        setInputText("");
    };

    const statusHandler = (e) => {
        setStatus(e.target.value);
    };

    return (
        <section>
            <form className="form-div">
                <div>
                    <input
                        type="text"
                        placeholder="Enter New Task Here"
                        value={inputText}
                        className="input"
                        onChange={inputTextHandler}
                    />
                    <AddCircleIcon
                        onClick={submitTodoHandler}
                        className="add-icon"
                    />
                    <select onChange={statusHandler}>
                        <option>All</option>
                        <option>Completed</option>
                        <option>Uncompleted</option>
                    </select>
                </div>
            </form>
        </section>
    );
};

export default Form;
Вход в полноэкранный режим Выйти из полноэкранного режима

Вот компонент Form:

Компонент задачи

Этот компонент отображает пользовательский интерфейс и функциональные возможности в рамках отдельных задач, которые задает пользователь. Вы можете удалить задачи из Material UI, нажав на иконку DeleteIcon. Нажав на иконку CheckCircleIcon из Material UI, вы можете отметить «todo» как «завершенное».

Вот код для компонента Task:

import React, { useState } from "react";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import DeleteIcon from "@mui/icons-material/Delete";

const Task = () => {
    const [todos, setTodos] = useState([]);
    const [filteredTodos, setFilteredTodos] = useState([]);

    const deleteHandler = () => {
        setTodos(todos.filter((el) => el.id !== todo.id));
    };

    const completeHandler = () => {
        setTodos(
            todos.map((item) => {
                if (item.id === todo.id) {
                    return {
                        ...item,
                        completed: !item.completed,
                    };
                }
                return item;
            }),
        );
    };

    return (
        <section className="task-section">
            <div className="class-list">
                <p className={`${todo.completed ? "pargh2" : "pargh"}`}>
                    {text}
                </p>
            </div>
            <div>
                <button onClick={completeHandler} className="btn-2">
                    <CheckCircleIcon className="icon2" />
                </button>
                <button onClick={deleteHandler} className="btn-1">
                    <DeleteIcon className="icon1" />
                </button>
            </div>
        </section>
    );
};

export default Task;
Вход в полноэкранный режим Выход из полноэкранного режима

Вот компонент Task.

Компонент TaskList

Этот компонент отображает различные задачи, созданные пользователем, и выводит их в виде неупорядоченного списка в DOM.

Вот код:

import React from "react";
import Task from "./Task";

const Tasklist = () => {
    const [todos, setTodos] = useState([]);
    const [filteredTodos, setFilteredTodos] = useState([]);

    return (
        <div>
            <ul>
                {filteredTodos.map((todo) => (
                    <Task
                        text={todo.text}
                        key={todo.id}
                        todos={todos}
                        setTodos={setTodos}
                        todo={todo}
                    />
                ))}
            </ul>
        </div>
    );
};

export default Tasklist;
Вход в полноэкранный режим Выход из полноэкранного режима

Вот конечный результат:

Тестирование иконок MUI

Material UI предоставляет широкий спектр регрессионных тестов. Компоненты MUI тестируются внутри. @testing-library/react — это библиотека с первоклассным API для такого подхода. Иконки MUI, экспортируемые из @mui/icons-material, имеют атрибут data-testid для целей тестирования.

Например:

import CameraIcon from '@mui/icons-material/Camera';
Войти в полноэкранный режим Выйти из полноэкранного режима

После установки он имеет следующее свойство:

<svg data-testid="CameraIcon"></svg>
Войти в полноэкранный режим Выйти из полноэкранного режима

Заключение

В этой статье мы рассмотрели React Material UI и изучили его иконки, процессы установки и применения. Мы также осветили возможный вариант использования в приложении для отслеживания задач.
Вы можете получить доступ к исходному коду на Github Repo.

Вы также можете посмотреть развернутое приложение здесь.

Автор: Доро Ономе

Создавайте CRUD-приложения на основе React без ограничений

Создание CRUD-приложений включает в себя множество повторяющихся задач, отнимающих ваше драгоценное время разработки. Если вы начинаете с нуля, вам также придется внедрять собственные решения для критически важных частей приложения, таких как аутентификация, авторизация, управление состоянием и сетевое взаимодействие.

Ознакомьтесь с refine, если вы заинтересованы в безголовом фреймворке с надежной архитектурой и полным набором лучших отраслевых практик для вашего следующего CRUD-проекта.

refine — это фреймворк на базе React с открытым исходным кодом для создания CRUD-приложений без ограничений.
Он может ускорить время разработки до 3 раз без ущерба для свободы стиля, кастомизации и рабочего процесса проекта.

refine является безголовым по своей конструкции и подключает 30+ бэкенд-сервисов «из коробки», включая пользовательские REST и GraphQL API.

Посетите GitHub-репозиторий refine для получения дополнительной информации, демонстраций, учебников и примеров проектов.

Оцените статью
devanswers.ru
Добавить комментарий