Search code examples
nuxt3.jsicon-fonts

nuxt @coremyslo/nuxt-icon-font svg icon transformed when use

I'm working on nuxt3, TailwindCss. Using @coremyslo/nuxt-icon-font and svg to make icon font, but some of icon did not show as expected.

This is my svg image content

<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>

When I add svg image directly

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

enter image description here

When I add by icon-font

<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>

enter image description here

This is my 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"
},
Solution

  • Finally found the solution.

    It because strokes get ignored when generating fonts. what I have to do is convert them to fills .

    On Illustrator: Select all the paths → go to menu Object → Expand