Skip to content
Gallery
namerr
О проекте
Проектный план
Этап 1: Подготовка и Планирование
Стек
Технологии
Архитектура
namerr
шаблоны
Share
Explore
СТО

Icons component

Создание собственной библиотеки иконок и интеграция её в проект на React.js с использованием NextUI и Tailwind CSS может быть выполнена следующим образом:
1
Для передачи svg в компонент можно использовать специальный компонент ReactSVG из библиотеки react-svg. Пример:
import ReactSVG from 'react-svg';

const ContextButton = ({icon, name}) => {
return (
<div className="context-button">
<ReactSVG src={require(`../icons/${icon}.svg`)} />
<span>{name}</span>
</div>
);
};

В данном примере передается путь к svg файлу через require и отображается с помощью компонента ReactSVG. Также в компоненте выводим название иконки. При использовании компонента необходимо установить библиотеку react-svg:
npm install --save react-svg

Шаг 1: Создание иконок

Создайте иконки в любом графическом редакторе, например, в Adobe Illustrator или Figma.
Экспортируйте иконки в формате SVG.

Шаг 2: Создание React-компонентов для иконок

Создайте папку icons внутри папки src/components вашего проекта.
Для каждой иконки создайте отдельный React-компонент. Например, для иконки "home":
// src/components/icons/HomeIcon.js
import React from 'react';

const HomeIcon = ({ size = 24, color = 'currentColor', ...props }) => (
<svg width={size} height={size} viewBox="0 0 24 24" fill={color} {...props}>
{/* SVG content */}
</svg>
);

export default HomeIcon;

Шаг 3: Интеграция в проект

Импортируйте иконки в нужные компоненты и используйте их как обычные React-компоненты.
import HomeIcon from '../components/icons/HomeIcon';

const MyComponent = () => {
return (
<div>
<HomeIcon size={32} color="#000" />
</div>
);
};

Шаг 4: Добавление в библиотеку

Если вы хотите сделать эти иконки переиспользуемыми, вы можете создать npm-пакет с вашей библиотекой иконок и затем установить его в любом проекте.

Шаг 5: Стилизация с Tailwind CSS

Вы можете легко стилизовать эти иконки с помощью классов Tailwind CSS, применяя их к компоненту иконки.
<HomeIcon className="text-black w-8 h-8" />

Это базовый план, и вы можете адаптировать его в соответствии с вашими требованиями и структурой проекта.
megaphone
Можно автоматически конвертировать SVG-иконки в React-компоненты. Существует несколько инструментов и библиотек, которые могут помочь в этом:

SVGR

⁠
SVGR
⁠
позволяет преобразовать SVG файлы в React-компоненты. Установите SVGR через npm или yarn:
npm install @svgr/cli --save-dev
# или
yarn add @svgr/cli --dev

Затем, вы можете конвертировать все SVG файлы в папке в React-компоненты:
npx @svgr/cli -d src/components/icons src/assets/icons

Эта команда преобразует все SVG файлы из src/assets/icons в React-компоненты и сохранит их в src/components/icons.

Create React SVG Icon

Еще одна опция — использовать библиотеку
create-react-svg-icon
⁠
. Она также позволяет автоматически преобразовать SVG в React-компоненты.

Собственный скрипт

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

Интеграция в процесс сборки

Эти инструменты можно интегрировать в ваш процесс сборки с помощью Webpack или других сборщиков, чтобы автоматически создавать React-компоненты при изменении SVG файлов.
Выбор метода зависит от ваших потребностей и структуры проекта.
Load content from whimsical.com?
Loading external content may reveal information to 3rd parties. Learn more
Allow
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.