Как обрабатывать импорт SVG (ES6) в накопительный пакет

Question

Если я импортирую файл SVG в модуль ES6, как мне справиться с этим в накопительном пакете? В настоящее время у меня есть что-то вроде этого (простой пример того, что я делаю):

import next from '../assets/next.svg';
export default () => console.log('Here is some Svg: ! ', next);

И у меня есть свертка конфигурации, которая выглядит так:

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  entry: 'src/app.js',
  dest: 'build/app.min.js',
  format: 'iife',
  sourceMap: 'inline',
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
    resolve({
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs(),
  ],
};

И тогда я получаю следующую ошибку:

Не удалось разрешить "../assets/next.svg" из /home/magnferm/projects/slask/rollup-test/src/chill/index.js

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

Answer 1

Был плагин для этого, конечно. Он называется rollup-plugin-image и обрабатывает, среди других форматов, импорт.svg:

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import image from 'rollup-plugin-image';

export default {
  entry: 'src/app.js',
  dest: 'build/appn.min.js',
  format: 'iife',
  sourceMap: 'inline',
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
    resolve({
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs(),
    image()
  ],
};