Полное руководство по импорту SVG в TypeScript: методы и примеры кода

В современной веб-разработке масштабируемая векторная графика (SVG) играет решающую роль в создании визуально привлекательных и отзывчивых пользовательских интерфейсов. Если вы работаете с TypeScript, вам может быть интересно, как импортировать и использовать файлы SVG в своей кодовой базе. В этой статье мы рассмотрим различные методы импорта SVG в TypeScript, а также приведем примеры кода для каждого подхода.

Метод 1: встроенный SVG
Один простой способ использования SVG в TypeScript — встроенное встраивание. Вы можете скопировать разметку SVG непосредственно в код TypeScript, используя литералы шаблона:

const svgIcon = `<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 3L5.33 18h13.34L12 3z" />
</svg>`;

Метод 2: Импорт файлов
Другим распространенным методом является импорт файлов SVG в виде модулей. Такой подход позволяет вам хранить файлы SVG отдельно от кода TypeScript и использовать систему модулей TypeScript:

  1. Установите необходимые зависимости:

    npm install --save-dev @svgr/webpack url-loader file-loader

  2. Настройте файл webpack.config.js:

    module.exports = {
// ...
module: {
rules: [
  // ...
  {
    test: /\.svg$/,
    use: ['@svgr/webpack', 'url-loader'],
  },
],
},
};

  3. Импортируйте файл SVG в свой код TypeScript:

import { ReactComponent as SvgIcon } from './icon.svg';
function App() {
  return (
    <div>
      <SvgIcon />
    </div>
  );
}

Метод 3: импорт компонентов React
Если вы используете React в своем проекте TypeScript, вы можете импортировать файлы SVG как компоненты React, используя пакет @svgr/webpack:

  1. Установите необходимые зависимости:

    npm install --save-dev @svgr/webpack

  2. Настройте файл webpack.config.js (аналогично методу 2).

  3. Импортируйте файл SVG как компонент React:

import { ReactComponent as SvgIcon } from './icon.svg';
function App() {
  return (
    <div>
      <SvgIcon />
    </div>
  );
}

Метод 4: импорт URL-адресов
Если вы предпочитаете использовать URL-адреса для ссылки на ваши файлы SVG, вы можете импортировать их напрямую с помощью пакета url-loader:

  1. Установите необходимые зависимости:

    npm install --save-dev url-loader

  2. Настройте файл webpack.config.js (аналогично методу 2).

  3. Импортируйте файл SVG как URL-адрес:

import svgUrl from './icon.svg';
function App() {
  return (
    <div>
      <img src={svgUrl} alt="SVG Icon" />
    </div>
  );
}

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