Как вы получаете файл SVG и использовать его в качестве <svg>?

Мой вопрос:

Как мне получить файл .svg и использовать его с <svg> тег, чтобы я мог также интерактивно стилизовать его (например, при наведении), а не так, как я сделал в моем примере с <img> тег?

Цель:

Создайте эскиз, который показывает флаг каждой страны (149 номеров) на моем главном маршруте '/'

Проблема:

Я установил статический маршрут в своем коде Express, чтобы все флаги были доступны.

server.js:

app.use('/flags', express.static(FLAGS_FILES));
app.get('/flags', async (req, res) => {
    let myFlags;

    await readdir('data/flag-icons/')
        .then((flags) => myFlags = flags)
        .catch(err => console.log('Error:', err))

    res.json(myFlags)
});

На стороне клиента я хочу получить каждый файл.svg и вставить его в свой компонент.

Мой React Component выглядит так:

Компонент MapThumbnail:

render(){
        const {flagcode} = this.props;
        const filepath = `/flags/${mapcode}/vector.svg`;

        console.log('filepath:', filepath);
        return (
            <MapThumbnailStyle>
                <img src={filepath} 
                     alt={flagcode} 
                     title={flagcode} 
                     width='40px' 
                     height='40px' 
                />
            </MapThumbnailStyle>
        );
    }
Источник

3 ответа

Решение

В большинстве случаев вы можете напрямую встроить содержимое файла SVG в render функция, как -

TL; DR

реагируют-погрузчик-SVG

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

Суть идеи заключается в следующем -

vector.svg

<svg>
  <circle cx="50" cy="50" r="25" stroke-width="5" />
</svg>

Vector.js

Теперь создайте vector.js и просто скопируйте содержимое SVG, как показано ниже

import React from "react"
export default () => (
  <svg>
    <circle cx="50" cy="50" r="25" stroke-width="5" />
  </svg>
);

и вы можете вручную отредактировать некоторые элементы здесь или назначить идентификаторы для их анимации.

Компонент MapThumbnail

А в вашем компоненте MapThumbnail вы можете импортировать его как JS и стилизовать SVG так, как вам нужно -

import Vector from "./path/to/vector";

// ...
// ...

render() {
  return <div>
    <Vector />
  </div>
}

Это преобразование SVG в React Component может быть автоматизировано до нескольких уровней и обеспечивается несколькими инструментами - одним из таких инструментов является response-svg-loader. Отказ от ответственности - я автор реакции-svg-загрузчик.

Источник

https://github.com/gilbarbara/react-inlinesvg выглядит так, как будто это поможет вам.

Источник

Лучший способ - ленивая загрузка компонента SVG.

      const SvgComponent = React.lazy(() => import('../filepath.svg'))

return (
  <React.Suspense fallback={<p>Loading...</P>}>
    <SvgComponent />
  </React.Suspense>
)

И это решение также работает в React Native вместе с модулем react-native-svg-transformer .

Источник
Другие вопросы по тегам