无需自定义组件替换Vuetify单个图标为Font Awesome SVG及viewBox适配问题

问题根因 #

你当前配置的默认图标字体为Material Design（iconfont: 'md'），Vuetify对该图标集默认使用0 0 24 24的固定viewBox，而Font Awesome图标大多使用0 0 512 512的viewBox（部分特殊图标尺寸有差异），直接传入SVG路径就会出现视口不匹配的问题。

解决方案 #

Vuetify的图标配置支持将单个图标设置为包含path和viewBox属性的对象，你可以手动指定对应Font Awesome图标的正确viewBox即可，无需编写自定义组件：

// 引入时同时引入图标元数据
import { faEnvelope, faQuestionCircle } from '@fortawesome/free-solid-svg-icons'

Vue.use(Vuetify)

const app = new Vue({
  vuetify: new Vuetify({
    icons: {
      iconfont: 'md',
      values: {
        // faEnvelope导出的结构为[宽度, 高度, 别名, Unicode, 路径]
        email: {
          path: faEnvelope[4],
          viewBox: `0 0 ${faEnvelope[0]} ${faEnvelope[1]}`
        },
        question_circle: {
          path: faQuestionCircle[4],
          viewBox: `0 0 ${faQuestionCircle[0]} ${faQuestionCircle[1]}`
        }
      }
    },
  // ...其余配置
  })
})

如果需要替换的图标较多，可以封装通用转换函数简化配置：

// 通用转换函数
const convertFaToVuetifyIcon = (faIcon) => {
  const [width, height, , , path] = faIcon
  return { path, viewBox: `0 0 ${width} ${height}` }
}

// 配置时直接调用即可
values: {
  email: convertFaToVuetifyIcon(faEnvelope),
  question_circle: convertFaToVuetifyIcon(faQuestionCircle)
}

修改配置后v-icon组件会自动使用你指定的viewBox渲染，和原生Font Awesome组件的渲染效果完全一致。

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