由于您正在寻找避免将所有图标加载到 vue/vuetify 中的选项，因此我建议您使用摇树方法并手动添加您要使用的每个图标。这可能有点乏味，但从长远来看，按需添加图标将是有益的——因为 webpack 只会捆绑您指定的图标。
请注意：
在本教程中，我假设读者拥有 Pro 包。如果您只想使用免费的，只需从组合中删除任何类似于 pro 的东西
您可以在下面看到我使用 vuetify 以及使用带有 v-icon 和 v-text/v-html 的 SVG 的首选方式：
首先我们要安装图标：
（在项目中打开终端/命令提示符并安装）
$ npm i --save @fortawesome/fontawesome-svg-core // this is the svg core, it is needed.
$ npm i --save @fortawesome/vue-fontawesome // Vue integration *
$ npm i --save @fortawesome/free-brands-svg-icons // Branding icons
$ npm i --save @fortawesome/free-regular-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/free-solid-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/pro-regular-svg-icons // Pro icons regular type
$ npm i --save @fortawesome/pro-light-svg-icons // Pro icons light type
$ npm i --save @fortawesome/pro-solid-svg-icons // Pro icons solid type
$ npm i --save @fortawesome/pro-duotone-svg-icons // Pro icons duotone type ***
-
( * ) vue 集成包more info
-
( ** ) 仅免费图标需要，如果您拥有 Pro 并按照说明here，它们已经包含在 pro 中。
-
( *** ) 在撰写本文时，双色调图标尚未完全集成，请注意错误。
然后让我们将其添加到我们的 vuetify 配置中：
我在这里假设您将 vuejs 与 javascript（不是 typescript） 一起使用，并且您已经通过 vue add vuetify 安装了 vuetify。 vuetify.js 文件应位于 src 文件夹中的 plugins 文件夹中。 Your milage may vary.
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
// ... there should be more here, but see next part below ...
Vue.component('font-awesome-icon', FontAwesomeIcon) // add it to vue
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg', // The bees knees, what most people are looking for.
},
});
好的，现在我们已经添加了 FontAwesome 5 的主要组件，让我们使用 treeshaking 来指示我们想为我们的项目使用哪些图标。我将只使用两个图标作为示例：fa-plus 和 fa-user-circle，我将为我们安装的三个 Font Awesome Pro 5 软件包添加它们（Light、Regular 和 Duotone），然后我将为实体添加其他一些（条和用户），以查看如何同时以两种方式完成。
所以回到我们的vuetify.js文件，我们替换
// ... there should be more here, but see next part below ...
使用以下内容（注意驼峰式）：
// src/plugins/vuetify.js
// ...
import {
faBars,
faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'
// ...
快速说明：如果您仍想添加这些库的整个库，可以通过如下方式导入：import { far } from '@fortawesome/pro-regular-svg-icons'（对于常规） 等等。
如您所见，我们现在已将 fa-plus 和 fa-user-circle 添加到我们的项目中。从这里开始，我们需要将它们添加到我们导入到vuetify.js 配置中的library。 （不要汗，整个文件可以在下面的代码sn-p中看到。）：
// src/plugins/vuetify.js
// ...
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
/// ...
现在我们已经将它们添加到库中，我们需要将它们交给 vuetify。 Vuetify 有一些 特殊 图标，它们用于 <v-app-bar-nav-icon></v-app-bar-nav-icon> （汉堡菜单） 之类的东西。我们可以自定义这些，并将我们自己的添加到组合中（如果我们愿意）。我通过定义一个常量并在其中添加我需要的所有图标来做到这一点，如下所示：
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
然后我们将这个常量添加到配置中，如下所示：
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS,
},
});
您也可以将它们直接添加到 values 变量中，但我发现通过常量来执行此操作更具可读性。
现在我们可以在模板中使用这些，追加或前置：
<template>
<v-app>
<!-- reference the whole path -->
<v-icon>$vuetify.icons.add</v-icon>
<!-- but this is easier -->
<v-icon>$add</v-icon>
<v-select
:items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
最后，这里是完整的例子：
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
import {
faBars,
faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS,
},
});
<template>
<v-app>
<!-- reference the whole path -->
<v-icon>$vuetify.icons.add</v-icon>
<!-- but this is easier -->
<v-icon>$add</v-icon>
<v-select
:items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
建议单独的文件以便更好地阅读
我们可以将 fontAwesome 逻辑分离到另一个文件中：
所以我们有 2 个文件：
-
fontAwesome.js 用于处理属于 fontAwesome 的所有逻辑
-
vuetify.js 你将从fontAwesome.js 导入图标
// src/plugins/fontAwesome.js
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
import {
faBars,
faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
export { CUSTOM_ICONS }
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { CUSTOM_ICONS } from "./fontAwesome"
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS
},
});
<template>
<v-app>
<!-- reference the whole path -->
<v-icon>$vuetify.icons.add</v-icon>
<!-- but this is easier -->
<v-icon>$add</v-icon>
<v-select
:items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
延伸阅读：