如何在Laravel MIX上创建svg精灵？

我需要在laravel mix上配置构建SVG sprite。
我尝试了几个在webpack下的库，result = 0。如何在Laravel MIX上创建svg精灵？

有人可以建议如何配置？

凡写webpack.mix.js或app.js处理程序代码？

来源

2017-09-15 korg

得到一个SVG雪碧没有回答你的问题，但我遇到了这个问题，我只是决定停止使用SVG精灵，基于[这篇CSS-Tricks文章：]（https://css-tricks.com/pretty-good-svg-icon-system/） –

这是一个非常糟糕的主意。我通常有很多重复多次的图标。使用这种方法会增加代码输出量。 – korg

一种方式，我能够得到SVG精灵与Laravele Mix & svg-spritemap-webpack-plugin一起使用。

首先安装spritemap插件

npm install svg-spritemap-webpack-plugin --save-dev

然后添加配置webpack.mix.js这样的：

const mix = require('laravel-mix'); 
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin'); 

// Set up the spritemap plugin 
mix.webpackConfig({ 
    plugins: [ 
     new SVGSpritemapPlugin({ 
      src:'assets/svg/icons/*.svg', 
      filename: '/svg/icons.svg', 
      prefix: '', 
      svg4everybody: true, 
      svgo: { 
       removeTitle: true, 
       removeStyleElement: true, 
       cleanupNumericValue: true, 
      }, 
     }) 
    ] 
}); 

// Adapt laravel-mix webpack config to better handle svg images. 
Mix.listen('configReady', (webpackConfig) => { 

    // Add separate svg loader 
    webpackConfig.module.rules.push({ 
     test: /\.(svg)$/, 
     include: /assets\/svg/, 
     loaders: [ 
      { 
       loader: 'file-loader', 
       options: { 
        name: 'svg/[name].[ext]?[hash]', 
        publicPath: Config.resourceRoot 
       } 
      }, 

      { 
       loader: 'img-loader', 
       options: Config.imgLoaderOptions 
      } 
     ] 
    }); 

    // Exclude local 'svg' folder from font loader 
    let fontLoaderConfig = webpackConfig.module.rules.find(rule => String(rule.test) === String(/\.(woff2?|ttf|eot|svg|otf)$/)) 
    fontLoaderConfig.exclude = /(assets\/svg)/; 

});

有了这个，你应该能够* .SVG文件添加到/resources/assets/svg/*.svg被复制到公共和从/resources/assets/svg/icons/*.svg

来源

2018-01-14 14:18:30 Priit

如何在Laravel MIX上创建svg精灵？

回答

相关问题