图标

Vuetify 只能看出 Material Design Icons、Material Icons、Font Awesome 4 和 Font Awesome 5。 默认情况下，应用程序将默认使用 Material Design Icons。

用例

要更改你的字体库，需要在实例化过程中添加 iconfont 选项。

  1. // src/plugins/vuetify.js
  3. import Vue from 'vue'
  4. import Vuetify from 'vuetify/lib'
  6. Vue.use(Vuetify)
  8. export default new Vuetify({
  9.   icons: {
  10.     iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
  11.   },
  12. })

使用预定义选项将根据所选的预置预填充默认值。这将覆盖默认的 icon 值。欲了解更多信息，请参阅 icon preset values。

安装 iconfonts

你需要包括指定的图标库（即使使用默认图标库）。这可以通过包含 CDN 链接或将图标库导入到你的应用程序中来完成。

安装 Material Design Icons

这是 Vuetify 的默认图标字体。您可以通过 CDN 包含它：

  1. <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

或者作为本地依赖：

  1. $ yarn add @mdi/font -D
  2. // OR
  3. $ npm install @mdi/font -D
  1. // src/plugins/vuetify.js
  3. import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
  4. import Vue from 'vue'
  5. import Vuetify from 'vuetify/lib'
  7. Vue.use(Vuetify)
  9. export default new Vuetify({
  10.   icons: {
  11.     iconfont: 'mdi', // default - only for display purposes
  12.   },
  13. })

安装 Material Design Icons (JS SVG)

指定 SVG 路径的方式来使用 @mdi/js。在生产环境中优化你的应用程序时推荐安装。如果你计划使用多个默认图标，那么就 只 需要包含它。

  1. $ yarn add @mdi/js -D
  2. // OR
  3. $ npm install @mdi/js -D

指定 mdiSvg iconfont：

  1. // src/plugins/vuetify.js
  3. import Vue from 'vue'
  4. import Vuetify from 'vuetify/lib'
  6. Vue.use(Vuetify)
  8. export default new Vuetify({
  9.   icons: {
  10.     iconfont: 'mdiSvg',
  11.   },
  12. })

你可以自定义仅导入你使用的图标，以授予更小的捆绑包大小。

  1. <!-- Vue Component -->
  3. <template>
  4.   <v-icon>{{ svgPath }}</v-icon>
  5. </template>
  7. <script>
  8.   import { mdiAccount } from '@mdi/js'
  10.   export default {
  11.     data: () => ({
  12.       svgPath: mdiAccount
  13.     }),
  14.   }
  15. </script>

安装 Material Icons

安装步骤与上面相同。对于没有构建过程的项目，建议从 CDN 导入图标

  1. <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

或者，可以使用 yarn 或 npm 在本地安装。 请记住，这不是官方的 google 仓库，可能无法接收更新

  1. $ yarn add material-design-icons-iconfont -D
  2. // OR
  3. $ npm install material-design-icons-iconfont -D

安装软件包后，将其导入到主目录的 js 文件中。通常是位于 src/ 文件夹中的 main.js, index.js 或 app.js。如果您使用的是 SSR 应用程序，则可能在 client.js 或 entry-client.js 文件中。

  1. // src/plugins/vuetify.js
  3. import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
  4. import Vue from 'vue'
  5. import Vuetify from 'vuetify/lib'
  7. Vue.use(Vuetify)
  9. export default new Vuetify({
  10.   icons: {
  11.     iconfont: 'md',
  12.   },
  13. })

安装 Font Awesome 5 Icons

安装 FontAwesome 最简单的方法是使用 cdn。在你主要的 index.html 的头部里放置这个代码：

  1. <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">

要在本地安装，你可以使用你喜欢的软件包管理器版本 Free 安装 FontAwesome：

  1. $ yarn add @fortawesome/fontawesome-free -D
  2. // OR
  3. $ npm install @fortawesome/fontawesome-free -D

在你的主入口中，只需导入包中的 all.css。如果你正在操作一个 webpack 项目，你需要使用 webpack css loader 来设置对 .css 文件的支持。如果你已经在使用 Vue CLI，那么这些都会自动完成。

  1. // src/plugins/vuetify.js
  3. import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
  4. import Vue from 'vue'
  5. import Vuetify from 'vuetify/lib'
  7. Vue.use(Vuetify)
  9. export default new Vuetify({
  10.   icons: {
  11.     iconfont: 'fa',
  12.   },
  13. })

安装 Font Awesome 4 Icons

与上面相同。通过 cdn 安装 FontAwesome 在你的项目内是最简单方式：

  1. <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css" rel="stylesheet">

安装 FontAwesome4 的方法与它的新版本相同，只是从一个不同的仓库安装。 你将看准是 font-awesome 而不是 @fortawesome。

  1. $ yarn add font-awesome@4.7.0 -D
  2. // OR
  3. $ npm install font-awesome@4.7.0 -D

不要忘记，你的项目需要识别 css。如果你正在使用 webpack，安装和设置 css loader。

  1. // src/plugins/vuetify.js
  3. import 'font-awesome/css/font-awesome.min.css' // Ensure you are using css-loader
  4. import Vue from 'vue'
  5. import Vuetify from 'vuetify/lib'
  7. Vue.use(Vuetify)
  9. export default new Vuetify({
  10.   icons: {
  11.     iconfont: 'fa4',
  12.   },
  13. })

安装 Font Awesome SVG Icons

添加必需的依赖项。

  1. $ yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons -D
  2. // or
  3. $ npm install @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons -D

然后在 Vuetify 配置中全局添加 font-awesome-icon 组件，并设置 faSvg 为图标字体。

  1. // src/plugins/vuetify.js
  3. import Vue from 'vue'
  4. import Vuetify from 'vuetify/lib'
  5. import { library } from '@fortawesome/fontawesome-svg-core'
  6. import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  7. import { fas } from '@fortawesome/free-solid-svg-icons'
  9. Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
  10. library.add(fas) // Include needed icons
  12. Vue.use(Vuetify)
  14. export default new Vuetify({
  15.   icons: {
  16.     iconfont: 'faSvg',
  17.   },
  18. })

使用自定义图标

假设你的应用程序在 Vuetify 组件中调用自定义图标。你可以在全局级别配置它，而不是每次出现组件时都创建包装器组件或手动定义特定的图标。

  1. // src/plugins/vuetify.js
  3. import Vue from 'vue'
  4. import Vuetify from 'vuetify/lib'
  6. Vue.use(Vuetify)
  8. export default new Vuetify({
  9.   icons: {
  10.     iconfont: 'fa',
  11.     values: {
  12.       cancel: 'fas fa-ban',
  13.       menu: 'fas fa-ellipsis-v',
  14.     },
  15.   },
  16. })

假设你的应用程序在 Vuetify 组件中调用自定义图标。你可以在全局级别配置它，而不是每次出现组件时都创建包装器组件或手动定义特定的图标。

  1. // src/plugins/vuetify.js
  3. import Vue from 'vue'
  4. import Vuetify from 'vuetify/lib'
  6. const MY_ICONS = {
  7.   complete: '...',
  8.   cancel: '...',
  9.   close: '...',
  10.   delete: '...', // delete (e.g. v-chip close)
  11.   clear: '...',
  12.   success: '...',
  13.   info: '...',
  14.   warning: '...',
  15.   error: '...',
  16.   prev: '...',
  17.   next: '...',
  18.   checkboxOn: '...',
  19.   checkboxOff: '...',
  20.   checkboxIndeterminate: '...',
  21.   delimiter: '...', // for carousel
  22.   sort: '...',
  23.   expand: '...',
  24.   menu: '...',
  25.   subgroup: '...',
  26.   dropdown: '...',
  27.   radioOn: '...',
  28.   radioOff: '...',
  29.   edit: '...',
  30.   ratingEmpty: '...',
  31.   ratingFull: '...',
  32.   ratingHalf: '...',
  33.   loading: '...',
  34.   first: '...',
  35.   last: '...',
  36.   unfold: '...',
  37.   file: '...',
  38. }
  40. Vue.use(Vuetify)
  42. export default new Vuetify({
  43.   icons: {
  44.     values: MY_ICONS,
  45.   },
  46. })

可重复使用的自定义图标

Vuetify 会 自动 将提供的任何图标字符串合并到可用预设池中。这使你可以通过简单地引用 全局图标 来创建可用于应用程序中使用的自定义字符串。

  1. // src/plugins/vuetify.js
  3. import Vue from 'vue'
  4. import Vuetify from 'vuetify/lib'
  6. Vue.use(Vuetify)
  8. export default new Vuetify({
  9.   icons: {
  10.     iconfont: 'mdi', // default
  11.     values: {
  12.       product: 'mdi-dropbox',
  13.       support: 'mdi-lifebuoy',
  14.       steam: 'mdi-steam-box',
  15.       pc: 'mdi-desktop-classic',
  16.       xbox: 'mdi-xbox',
  17.       playstation: 'mdi-playstation',
  18.       switch: 'mdi-nintendo-switch',
  19.     },
  20.   },
  21. })

给定提供的字符串，这可以帮助确保你的应用程序始终使用特定的图标。这样有几种方法让你可以在此系统上使用 <v-icon>。

  1. <!-- Vue Component -->
  3. <template>
  4.   <div>
  5.     <v-icon>$vuetify.icons.product</v-icon>
  6.     <v-icon>$product</v-icon>
  8.     <v-icon v-text="'$vuetify.icons.support'"></v-icon>
  9.     <v-icon v-text="'$support'"></v-icon>
  11.     <v-icon v-html="'$vuetify.icons.steam'"></v-icon>
  12.     <v-icon v-html="'$steam'"></v-icon>
  14.     <v-icon v-text="platform"></v-icon>
  15.   </div>
  16. </template>
  18. <script>
  19.   export default {
  20.     data: () => ({
  21.       user: {
  22.         name: 'John Leider',
  23.         platform: 'pc',
  24.       },
  25.     }),
  27.     computed: {
  28.       platform () {
  29.         return '$' + this.user.platform
  30.       }
  31.     }
  32.   }
  33. </script>

自定义组件

你可以在自己的自定义组件中使用相同的图标字符串。每当通过 v-text, v-html 或作为文本传递 $vuetify.icons (or shortcut $) 时，<v-icon> 都会查找该指定值。这使你可以创建易于构建和管理的自定义解决方案。

  1. <!-- Vue Component -->
  3. <template>
  4.   <div class="my-component">
  5.     <v-icon v-text="icon"></v-icon>
  6.     <slot></slot>
  7.   </div>
  8. </template>
  10. <script>
  11.   export default {
  12.     props: {
  13.       icon: {
  14.         type: String,
  15.         default: '$cancel'
  16.       }
  17.     }
  18.   }
  19. </script>

自定义 Font Awesome Pro Icons

你可以在 Font Awesome Pro 中使用组件图标来选择各个图标的权重：

  1. // src/plugins/vuetify.js
  3. import Vue from 'vue'
  4. import Vuetify from 'vuetify/lib'
  6. import { library } from '@fortawesome/fontawesome-svg-core'
  7. import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  8. import { faBars } from '@fortawesome/pro-light-svg-icons'
  9. import { faVuejs } from '@fortawesome/free-brands-svg-icons'
  11. Vue.component('font-awesome-icon', FontAwesomeIcon)
  12. library.add(faBars, faVuejs)
  14. Vue.use(Vuetify)
  16. export default new Vuetify({
  17.   icons: {
  18.     values: {
  19.       // set menu to light (default is solid)
  20.       menu: {
  21.         component: FontAwesomeIcon,
  22.         props: {
  23.           icon: ['fal', 'bars'],
  24.         },
  25.       },
  26.       // reusable custom icon
  27.       vuejs: {
  28.         component: FontAwesomeIcon,
  29.         props: {
  30.           icon: ['fab', 'vuejs'],
  31.         },
  32.       },
  33.     },
  34.   },
  35. })

组件图标

你可以使用自己的组件图标，而不是使用预设提供的图标字体。 你也可以在 Vuetify 组件中切换预设图标和你自己的图标。

  1. // src/plugins/vuetify.js
  3. import Vue from 'vue'
  4. import Vuetify from 'vuetify/lib'
  5. import IconComponent from './IconComponent.vue'
  7. Vue.use(Vuetify)
  9. export default new Vuetify({
  10.   icons: {
  11.     values: {
  12.       product: {
  13.         component: IconComponent, // you can use string here if component is registered globally
  14.         props: { // pass props to your component if needed
  15.           name: 'product',
  16.         },
  17.       },
  18.     },
  19.   },
  20. })

如果你想要你的 SVG 图标继承颜色并正确缩放-请确保添加以下 CSS：

  1. .your-svg-icon
  2.   fill: currentColor

使用缺失的 Material Icons

默认缺少一些 material icons，例如 person 和 person_outline 可用，但是 visibility_outline 不可用，而 visibility 可用。要使用这些缺失的 material icons，请在下面包含字体（如果已经注册，请删除另一个 material font）。

  1. <link
  2.       rel="stylesheet"
  3.       href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
  4. />

你可以添加你的自定义组件。假定它是 @/components/MaterialIcon.vue。

  1. <template>
  2.   <i :class="standardClass">{{ parsed.id }}</i>
  3. </template>
  5. <script>
  6. export default {
  7.   props: {
  8.     name: {
  9.       type: String
  10.     }
  11.   },
  12.   computed: {
  13.     parsed() {
  14.       const check = (customSuffixes, standardSuffix) => {
  15.         for (let suffix of customSuffixes) {
  16.           suffix = `_${suffix}`
  17.           if (this.name.endsWith(suffix)) {
  18.             return {
  19.               suffix: standardSuffix,
  20.               id: this.name.substring(0, this.name.indexOf(suffix))
  21.             }
  22.           }
  23.         }
  24.         return false
  25.       }
  27.       return (
  28.         check(['fill', 'filled'], '') ||
  29.         check(['outline', 'outlined'], 'outlined') ||
  30.         check(['two-tone', 'two-toned'], 'two-tone') ||
  31.         check(['round', 'rounded'], 'round') ||
  32.         check(['sharp', 'shapened'], 'sharp') || {
  33.           suffix: '',
  34.           id: this.name
  35.         }
  36.       )
  37.     },
  38.     standardClass() {
  39.       if (this.parsed.suffix) {
  40.         return `material-icons-${this.parsed.suffix}`
  41.       }
  42.       return 'material-icons'
  43.     }
  44.   }
  45. }
  46. </script>

然后你需要确切注册你想要的 material icons。

  1. import Vue from 'vue'
  2. import Vuetify from 'vuetify/lib'
  3. import MaterialIcon from '@/components/MaterialIcon'
  5. function missingMaterialIcons(ids) {
  6.   const icons = {}
  7.   for (const id of ids) {
  8.     for (const suffix of ['fill', 'outline', 'two-tone', 'round', 'sharp']) {
  9.       const name = `${id}_${suffix}`
  10.       icons[name] = {
  11.         component: MaterialIcon,
  12.         props: {
  13.           name
  14.         }
  15.       }
  16.     }
  17.   }
  18.   return icons
  19. }
  21. Vue.use(Vuetify, {
  22.   // iconfont: 'md',
  23.   icons: {
  24.     ...missingMaterialIcons(['visibility', 'visibility_off'])
  25.     // This will enable 'visibility_outline', 'visibility_off_round' and so on.
  26.   }
  27. })

最后，你可以使用像这样的 material icons。

  1. <!-- using as a prop. Be careful of double and single quotation. -->
  2. <v-text-field
  3.     label="password"
  4.     :append-icon="
  5.       pwShow
  6.         ? '$visibility_outline'
  7.         : '$visibility_off_outline'
  8.     "
  9.     @click:append="pwShow = !pwShow"
  10.     :type="pwShow ? 'text' : 'password'"
  11.   />
  13. <!-- using directly as an icon component -->
  14. <v-icon>$visibility_outline</v-icon>