Laravel MIX에서 svg 스프라이트를 만드는 방법은 무엇입니까?

Question

laravel mix에서 빌드 SVG 스프라이트를 구성해야합니다.
나는 webpack, result = 0의 밑에 몇몇 도서관을 시도했다.

구성 방법을 조언 해 줄 사람이 있습니까?

는 어디 webpack.mix.js 또는 app.js의 핸들러 코드를 작성하는?

Answer 1

한 가지 방법으로 나는 Laravele Mix & svg-spritemap-webpack-plugin으로 작업하는 SVG 스프라이트를 얻을 수있었습니다.

먼저 spritemap의

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

은 다음처럼 설정 webpack.mix.js를 추가 플러그인 설치 : 당신은 공중에 복사되는 /resources/assets/svg/*.svg에 * .svg 파일을 추가 할 수 있어야이와

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)/; 

}); 

및 /resources/assets/svg/icons/*.svg