是的,路径是正确的。将svg格式的图片放在src/icons/home文件夹中,并通过webpack配置将其加载为svg-sprite。

import * as path from 'path'
// const resolve = (dir) => path.resolve(__dirname, dir)
// const postcssPxToViewport = require('postcss-px-to-viewport')
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    configure: (
      webpackConfig: any,
      { env, paths }: { env: any; paths: any }
    ) => {
      webpackConfig.module.rules[1].oneOf = [
        ...[
          {
            test: /.svg$/, // 存放svg的文件夹
            include: path.resolve('./src/icons'),
            use: [
              { loader: 'svg-sprite-loader', options: {} },
              { loader: 'svgo-loader', options: { symbolId: 'icon-[name]' } },
            ],
          },
        ],
        ...webpackConfig.module.rules[1].oneOf,
      ]
      return webpackConfig
    },
  },
  devServer: {
    open: false,
  },
}

该配置使用svg-sprite-loadersvgo-loader将SVG文件加载为Sprite,并使用symbolId属性自定义生成的符号ID。

使用Webpack加载src/icons/home中的SVG图片作为SVG Sprite

原文地址: http://www.cveoy.top/t/topic/olgi 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录