Как использовать встроенные теги <svg>в приложении React с веб-пакетом - PullRequest
Новая
       28

Как использовать встроенные теги <svg>в приложении React с веб-пакетом

0 голосов
/ 01 марта 2019

Я получаю сообщение об ошибке при компиляции приложения React с помощью веб-пакета:

You may need an appropriate loader to handle this file type. <svg

Поначалу кажется, что эту проблему легко решить, но моя проблема в том, что яне могу найти ответы, которые соответствуют моему варианту использования.Я не импортирую svg из файла с расширением .svg

Вместо этого мои svg s находятся в компонентах React:

Пример: 

import React from 'react';
import PropTypes from 'prop-types';

const SvgIcon = ({ icon: Icon, ...rest }) => (
  <span>
    <Icon { ...rest } />
  </span>
);

Иконка: 

import React from 'react';

const TickIcon = (props) => (
  <svg { ...props }>
    <path
      d="M7.8,15.5c-0.3,0-0.7-0.1-0.9-0.3l-5-4.6c-0.5-0.5-0.5-1.2,0-1.7c0.5-0.5,1.3-0.5,1.8,0l4.1,3.8l8.5-7.8  c0.5-0.5,1.3-0.5,1.8,0c0.5,0.5,0.5,1.2,0,1.7l-9.4,8.6C8.5,15.4,8.2,15.5,7.8,15.5"
    />
  </svg>
);

export default TickIcon;

Используется так: 

<SvgIcon icon={ TickIcon } />

Я не могу найти способ сделать эту работу, я установил множество различных загрузчиков SVG и реализовалони в моем конфиге webpack, но ни один из них не работает из-за отсутствия реальных svg файлов?

Вот мои webpack.config

const webpack = require('webpack');
const path = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebPackPlugin({
  template: './source/index.html',
  filename: 'index.html',
});

const buildPlugin = new webpack.DefinePlugin({
  BUILD_INFO: JSON.stringify('BUILD-000'),
});

module.exports = {
  entry: './source/client.js',
  output: {
    path: path.resolve('build'),
    filename: 'bundled.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.js$|\.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  resolve: {
    alias: {
      api: path.resolve(__dirname, './source/js/api'),
      config: path.resolve(__dirname, './source/js/config'),
      components: path.resolve(__dirname, './source/js/components'),
      init: path.resolve(__dirname, './source/js/init'),
      context: path.resolve(__dirname, './source/js/context'),
      views: path.resolve(__dirname, './source/js/views'),
      utilities: path.resolve(__dirname, './source/js/utilities'),
      helpers: path.resolve(__dirname, './source/js/helpers'),
      store: path.resolve(__dirname, './source/js/store'),
      styles: path.resolve(__dirname, './source/styles'),
    },
    extensions: ['.js', '.jsx'],
  },
  plugins: [htmlPlugin, buildPlugin],
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000,
  },
  devServer: {
    disableHostCheck: true,
    historyApiFallback: true,
    port: 80,
    hot: false,
    host: '0.0.0.0',
    stats: {
      assets: true,
      children: false,
      chunks: false,
      hash: false,
      modules: false,
      publicPath: false,
      timings: true,
      version: false,
      warnings: true,
      colors: true,
    },
  },
};

Спасибо

1 Ответ

0 голосов
/ 01 марта 2019

Код, который вы показываете, не импортирует ReactDOM: 

import ReactDOM from 'react-dom'

Если вы используете синтаксис JSX, это, безусловно, необходимо.

Кроме того, нет никаких параметров, указанных дляbabel-loader.Вам, по крайней мере, нужно указать @babel/preset-react в качестве предустановки для его компиляции: 

module: {
  rules: [
    {
      test: /\.js$|\.jsx$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    }
  ]
}

@babel/preset-env строго не требуется, но будет выполнять декомпиляцию, чтобы вам не пришлось беспокоиться о браузереcopatibility.

...