/**
 * @param {string|Buffer} content 源文件的内容
 * @param {object} [map] 可选的 SourceMap 数据（来自上一个 loader）
 * @param {any} [meta] 可选的元数据
 * @returns {string|Buffer|void} 转换后的内容。可以可选地返回 SourceMap 和元数据。
 */
module.exports = function(content, map, meta) {
  // 同步处理：直接返回转换结果
  // return someSyncTransform(content);

  // 异步处理：使用 this.async() 获取回调函数
  const callback = this.async();
  someAsyncTransform(content, (err, result, sourceMaps, newMeta) => {
    if (err) return callback(err);
    // 参数：错误, 转换后的内容, 可选的 SourceMap, 可选的元数据
    callback(null, result, sourceMaps, newMeta);
  });
};

module.exports.pitch = function(remainingRequest, precedingRequest, data) {
  // remainingRequest: 当前 loader 之后还需要处理的 loader 和资源路径的字符串
  // precedingRequest: 当前 loader 之前已经处理过的 loader 的字符串
  // data: 可以在 pitch 和 normal 函数间共享的 data 对象
  // 如果返回非 undefined 值，会跳过后面 loader 的 pitch 和 normal 执行，以及文件读取，直接进入前一个 loader 的 normal 阶段！
};

const path = require("path");

// 定义 loader 选项的 JSON Schema
const schema = {
  type: "object",
  properties: {
    prefix: {
      type: "string",
      default: "icon-",
    },
  },
  additionalProperties: false,
};


/**
 * @description SVG 转 CSS 类
 * @param {string} content
 */
module.exports = function (content) {
  // 标记为可缓存
  this.cacheable();

  // 获取并验证选项
  const options = this.getOptions(schema);

  // 异步回调
  const callback = this.async();

  const { prefix = "icon-" } = options;

  // 1. 获取当前 SVG 文件路径
  const svgPath = this.resourcePath;

  // 2. 提取纯净的文件名（不含扩展名和路径）
  const fileName = path.basename(svgPath, ".svg");

  // 3. 生成 CSS 类名
  const className = `${prefix}${fileName}`;

  console.log(`transform svg: ${fileName}`);

  try {
    // 4. 优化 SVG 内容（可选）
    const optimizedSvg = content
      .replace(/\s+/g, " ") // 简化空格
      .replace(/#/g, "%23") // 转义 # 符号
      .replace(/"/g, "'"); // 统一引号

    // 5. 转换为 Base64 Data URL
    const base64 = Buffer.from(optimizedSvg).toString("base64");
    const dataUrl = `data:image/svg+xml;base64,${base64}`;

    // 6. 生成 CSS 规则
    // SVG 默认作为mask
    const cssMaskRule = `
      .${className} {
          mask-image: url("${dataUrl}");
          mask-repeat: no-repeat;
          mask-size: contain;
          display: inline-block;
          width: 1em;
          height: 1em;
          background-color: currentColor;
        }
    `;
    // SVG 作为背景图
    const cssBgRule = `
      .${className}?bg {
        background-image: url("${dataUrl}");
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        width: 1em;
        height: 1em;
      }
    `;

    callback(null, `${cssMaskRule} ${cssBgRule}`);
  } catch (error) {
    callback(error);
  }
};

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const svgIconLoader = path.resolve(__dirname, "svg-icon-loader");
const iconPath = path.resolve(__dirname, "src/icons"); // SVG目录

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ... 其他配置
      {
        test: /\.svg$/,
        include: [iconPath],
        use: [
          "style-loader", // 将 CSS 注入 DOM
          "css-loader", // 解析 CSS
          {
            loader: svgIconLoader,
            options: {
              prefix: "icon-",
            },
          },
        ],
      },
    ],
  },
};

const App = () => {
  return (
    <div style={{ color: "black", fontSize: 36 }}>
      <div className="icon-sun"></div>
      <div className="icon-moon"></div>
      <div className="icon-user"></div>
    </div>
  );
};

export default App

import "./icons/moon.svg"
import "./icons/sun.svg"
import "./icons/user.svg"