Vue中如何在父SVG内使用Font Awesome 5（vue-fontawesome）

嘿，刚好我之前在Vue项目里折腾过类似的场景，来给你捋捋在父SVG里用Font Awesome 5的最佳姿势～

一、父SVG内嵌套<svg>元素可行吗？ #

完全可行！不过要注意两个小细节：

• Font Awesome组件生成的内嵌SVG自带完整的viewBox，所以和父SVG的适配性很好，但要避免父SVG和子SVG的ID、裁剪路径（clipPath）等命名冲突，不然可能出现样式异常
• 如果父SVG有旋转变换，子SVG会跟着继承，要是不需要的话，可以给子SVG加个transform="none"覆盖

二、调整图标尺寸的最佳方式 #

不推荐用transform="scale(0.5)"，缩放容易导致图标边缘模糊，而且定位时容易出现偏移问题。更靠谱的方法有这几种：

• 用组件自带的size属性：这是最省心的方式，支持预设值（sm/lg/2x等）或者直接传像素数值：

  <svg width="200" height="200">
    <font-awesome-icon :icon="['fas', 'check']" size="sm" />
    <!-- 或者指定像素 -->
    <font-awesome-icon :icon="['fas', 'check']" :size="24" />
  </svg>
  

• 用CSS直接控制宽高：给图标加个自定义类，然后通过样式覆盖内联属性（记得加!important保证优先级）：

  <svg class="parent-svg">
    <font-awesome-icon :icon="['fas', 'check']" class="custom-icon" />
  </svg>
  
  <style scoped>
  .custom-icon {
    width: 30px !important;
    height: 30px !important;
  }
  </style>
  

• 用<g>标签包裹控制：把图标放进<g>里，给<g>设置宽高，配合preserveAspectRatio保持图标比例：

  <svg width="100" height="100" viewBox="0 0 100 100">
    <g width="25" height="25" preserveAspectRatio="xMidYMid meet">
      <font-awesome-icon :icon="['fas', 'check']" />
    </g>
  </svg>
  

三、导入单个图标JS的替代方案 #

如果想减少打包体积，或者希望图标完全融入父SVG（不嵌套），可以直接导入单个图标的JS文件，有两种玩法：

方法1：生成SVG字符串插入 #

用fontawesome.icon()把图标转换成SVG节点，再提取HTML字符串插入到父SVG中：

<template>
  <svg width="150" height="150" viewBox="0 0 150 150">
    <div v-html="checkIcon"></div>
  </svg>
</template>

<script>
import { faCheck } from '@fortawesome/free-solid-svg-icons'
import { icon } from '@fortawesome/fontawesome-svg-core'

export default {
  computed: {
    checkIcon() {
      // 提取SVG的HTML字符串
      return icon(faCheck).node[0].outerHTML
    }
  }
}
</script>

方法2：直接复用图标路径 #

把Font Awesome图标的路径数据直接放到父SVG里，彻底消除嵌套，完全和父SVG融为一体：

<template>
  <svg width="100" height="100" viewBox="0 0 512 512">
    <!-- 直接用faCheck的路径数据 -->
    <path :d="checkIconPath" fill="#2ecc71" />
  </svg>
</template>

<script>
import { faCheck } from '@fortawesome/free-solid-svg-icons'

export default {
  data() {
    return {
      checkIconPath: faCheck.icon[4] // faCheck.icon数组里的第4项就是路径d值
    }
  }
}
</script>

这种方式的好处是完全没有嵌套SVG，图标样式和父SVG完全同步，调整颜色、变换都更灵活。

四、额外小贴士 #

• 父SVG的fill属性会被内嵌的Font Awesome图标继承，如果要单独设置图标颜色，可以给组件加color属性，或者用fill="currentColor"配合CSS控制
• 要是常用图标比较多，可以用library.add()把它们加入全局库，这样模板里不用每次导入，直接写<font-awesome-icon icon="check" />就行
• 确保vue-font-awesome和@fortawesome/fontawesome-svg-core的版本匹配，避免出现兼容性bug

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