Vuetify的FontAwesome-如何在v-icon组件中包含Font Awesome图标

时间：2018-08-26 21:36:26

标签： vue.js font-awesome vuetify.js

希望有人会知道我在哪里出错了-我正在尝试使用Vuetify实现Font Awesome软件包。 Font Awesome已全部导入并可以使用（设置与我成功集成了Font Awesome的项目相同）：

我的基本知识const somethingAsync = () => new Promise(res => setTimeout(res, 500, 'foo')); function sumTotal(items) { return items.reduce((total, item) => item.price + total, 0) } function checkOut(items) { return Promise.all([ somethingAsync(), somethingAsync('johndoe@gmail.com'), sumTotal(items) ]).then(([offers, details, total]) => ( { offers, details, total } )); } console.log('start'); checkOut([{ price: 10 }, { price: 20 }]) .then(output => console.log(output)); 文件：

main.js

在组件中，我引用的图标如下：

我的import '@babel/polyfill' import Vue from 'vue' import './plugins/vuetify' import App from './App.vue' import store from './store' import './registerServiceWorker' import { library } from '@fortawesome/fontawesome-svg-core' import { faCode } from '@fortawesome/pro-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faCode) Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.config.productionTip = false new Vue({ store, render: h => h(App) }).$mount('#app') ：

Component.vue

^我遗漏了多余的代码*。

所以，我的问题是-我们如何将Font Awesome集成到Vuetify的v-icon组件中？

作为参考，我使用的是这里概述的内容：

https://vuetifyjs.com/en/components/icons

与我上面的规定完全相同，但是可惜我的图标没有显示...

更新 ：我特别想要一个不包含添加非常重的Font Awesome <template> ... <v-btn> <v-icon>fas fa-code</v-icon> </v-btn> ... </template> 文件（all.css）的解决方案-而是根据需要导入图标。 （在<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">中，缩小的all.css文件的总重量为52kb。

5 个答案:

答案 0 :(得分：7)

对于Nuxt / Vuetify项目：

作为上述答案的补充，您还可以在项目安装过程中创建的Vuetify配置文件中进行设置（ “ plugins / vuetify.js” ） ，添加“ iconfont”道具：

import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
 iconfont: 'fa'
})

现在，像这样使用图标组件：

<v-icon>fab fa-vuejs</v-icon>

答案 1 :(得分：3)

在Vuetify中的框架选项下发布了一个简单的解决方案：https://vuetifyjs.com/en/framework/icons

使用NPM或yarn安装图标：npm install @ fortawesome / fontawesome-free -D

Config-用于简单的vue项目

将此添加到您的main.js 

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
 iconfont: 'fa'
})

Config-用于nuxt + vuetify项目

在插件下创建一个js文件（例如icons.js）

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  iconfont: 'fa'
})

将此添加到nuxt.config.js中的插件

{ src: '~/plugins/icons.js', ssr:false }

用法

现在，您可以使用v-icon或在组件中添加/添加前缀来访问字体真棒图标

<v-slider
v-model="energy"
color="red"
label="Energy"
min="1"
max="100"
thumb-label="always"
prepend-icon="fa-burn"
></v-slider>

答案 2 :(得分：2)

好吧，因此使用上述评论者的建议，我设法通过使用标准的vue-font-awesome方法来使其工作，该方法包括字体真棒图标组件，将<v-icon>替换为我在其中使用的我的问题：

<v-btn>
   <v-icon>fas fa-code</v-icon>
</v-btn>

...成为：

<v-btn fab dark small color="black" v-on:click="addCodeBlock">
   <font-awesome-icon :icon="['fas', 'code']"/>
</v-btn>

答案 3 :(得分：2)

您可以使用tree shaking。

由于您正在寻找避免将所有图标加载到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 ***
  1. （*） vue集成包more info
  2. （**）仅免费图标需要，如果您拥有Pro，则它们已包含在pro中。
  3. （***）撰写本文时，双色调图标尚未完全集成，请注意错误。

然后将其添加到我们的vuetify配置中：

  

我在这里假设您将vuejs与javascript （不是打字稿）一起使用，并且已经通过vue add vuetify安装了vuetify。 vuetify.js文件应位于plugins文件夹中的src文件夹中。 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的主要组件，让我们使用树形交换来指示我们要在项目中使用哪些图标。我将仅使用两个图标作为示例：fa-plus和fa-user-circle，并为安装了（浅色，常规和双色调）然后我将为实体添加一些其他内容（条和用户），以了解如何同时以两种方式完成此操作。

所以回到我们的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。在这里，我们需要将它们添加到导入到library配置中的vuetify.js中。 （不要出汗，整个文件可以在下面的代码段中看到。）：

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

进一步阅读：

答案 4 :(得分：1)

在src / main.js中导入真棒字体：

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import 'font-awesome/css/font-awesome.css'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

然后在src / plugins / vuetify.js中定义iconfont 

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'fa4' // 'md' || 'mdi' || 'fa' || 'fa4'
})
相关问题
最新问题