Nuxt3+TailwindCss中@coremyslo/nuxt-icon-font图标显示异常问题

基于Nuxt3和TailwindCSS开发项目，使用@coremyslo/nuxt-icon-font将SVG转换为图标字体后，部分图标显示不符合预期，具体信息如下：

SVG图标内容 #

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4">
<path d="M8.67188 14.3298C8.67188 15.6198 9.66188 16.6598 10.8919 16.6598H13.4019C14.4719 16.6598 15.3419 15.7498 15.3419 14.6298C15.3419 13.4098 14.8119 12.9798 14.0219 12.6998L9.99187 11.2998C9.20187 11.0198 8.67188 10.5898 8.67188 9.36984C8.67188 8.24984 9.54187 7.33984 10.6119 7.33984H13.1219C14.3519 7.33984 15.3419 8.37984 15.3419 9.66984" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 6V18" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

直接引用SVG的代码及效果 #

<img class="w-[61px] h-[65px]" src="@/assets/icon-font/dollar.svg" alt="">

通过图标字体引用的代码及效果 #

<span class="icon ic-dollar text-8xl"></span>

<style lang="scss" scoped>
.icon {
  font-family: "icon-font";
}
.ic-dollar {
    &::before {
        content: var(--icon-font-dollar-square)
    }
}
</style>

nuxt.config配置 #

modules: [
  ...,
  '@coremyslo/nuxt-icon-font',
],
iconFont: {
    // Font name to be used in "font-family" and custom properties generated prefix "--icon-font-svgiconfilename"
    name: "icon-font",
    // folder with icons to watch
    sourceDirPath: "assets/icon-font",
    // target folder for generated fonts in "public" folder
    targetDirPath: "icon-font",
    // font formats to generate, fallback to ["woff2"] in case browserslist is not used, example for manual configuration: ["svg", "ttf", "woff", "woff2", "eot"] in any order
    formats: ["svg", "ttf", "woff", "woff2", "eot"],
    // Support of generating the most popular font as base64
    base64: false,
    // unicode symbol for first icon in iconfont (makes sense to change only if you're not going to use custom properties)
    unicode: "0xE900",
    // generated custom properties (variables) format. Other options are: "snake", "pascal", "camel", "header", "constant"
    case: "kebab"
},

排查与解决方案 #

核心问题分析 #

1. SVG内部样式未被工具兼容：SVG中的<g opacity="0.4">和stroke="white"属于内部硬编码样式，图标字体转换工具通常不会保留这类属性，导致显示效果偏离原始SVG。
2. CSS变量名称不匹配：SVG文件名为dollar.svg，结合配置case: "kebab"，生成的变量名应为--icon-font-dollar，而非代码中写的--icon-font-dollar-square，导致content取值错误，显示乱码。

具体修复步骤 #

1. 清理SVG内部样式
   移除SVG中硬编码的透明度和颜色属性，将样式控制交给CSS：

   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M8.67188 14.3298C8.67188 15.6198 9.66188 16.6598 10.8919 16.6598H13.4019C14.4719 16.6598 15.3419 15.7498 15.3419 14.6298C15.3419 13.4098 14.8119 12.9798 14.0219 12.6998L9.99187 11.2998C9.20187 11.0198 8.67188 10.5898 8.67188 9.36984C8.67188 8.24984 9.54187 7.33984 10.6119 7.33984H13.1219C14.3519 7.33984 15.3419 8.37984 15.3419 9.66984" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M12 6V18" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
   

2. 修正CSS变量与样式
   匹配正确的变量名，并通过CSS控制透明度和颜色：

   .ic-dollar {
       &::before {
           content: var(--icon-font-dollar);
           opacity: 0.4;
           color: white;
       }
   }
   

3. 重新生成字体
   重启Nuxt项目，让@coremyslo/nuxt-icon-font重新扫描SVG文件并生成字体资源。

4. 验证资源加载
   打开浏览器开发者工具，检查：

   • 字体文件icon-font是否正常加载（无404错误）
   • 全局样式中是否存在--icon-font-dollar变量

内容的提问来源于stack exchange，提问作者cony