2020-09-09 Inline SVG vs Icon Fonts

背景

最近几个项目都是公司内部项目，icon 都是使用免费的第三方资源。通常是 iconfont。

最新的项目是一个红酒电商系统，为了迎合红酒的高端气质，设计团队设计了很多好看的 icon。

使用自定义 icon 迫使我重新思考了如何使用 icon。

选择

选项：

• Inline SVG
• Icon Font

我参考了《Inline SVG vs Icon Fonts [CAGEMATCH] | CSS Tricks》

结论是 Inline SVG 胜出。

下面分享一下，Nuxt 中使用 Inline SVG

我们项目使用 Nuxt 框架，进而使用 nuxtjs/svg 基本配置和代码

$ yarn add --dev nuxtjs/svg

// nuxt.config.js
export default {
  buildModules: ["@nuxtjs/svg"],
};

<!-- vue -->
<template>
  <NuxtLogo />
</template>

<script>
  // *.svg?line 是关键
  import NuxtLogo from "~/assets/nuxt.svg?inline";

  export default {
    components: { NuxtLogo },
  };
</script>

<!-- output -->
<svg xmlns="http://www.w3.org/2000/svg"><path></path></svg>

refs:

• https://css-tricks.com/icon-fonts-vs-svg/
• https://github.com/nuxt-community/svg-module