在项目中使用图标

info

Lavas Basic 模版并不包含此功能

在项目中有两种使用图标的方式,可以同时使用:

  1. 使用 material 字体文件

  2. 引入自定义的 SVG 文件

字体文件

material 图标能够满足大部分应用场景:
material 图标

我们已经引入了 material 字体文件和所需样式表,直接使用 vuetify 中 Icons 组件即可,基本方法如下:

  1. <v-icon>home</v-icon>

更多使用方式请参考 Icons 组件文档。

自定义 SVG

当 material 图标无法满足使用需求时,我们可以引入自定义的 SVG 文件。

config/icon.js 配置文件中定义前缀和存放 SVG 的文件夹:

  1. {
  2. // 前缀
  3. prefix: 'svg-',
  4. // 用户自定义的svg文件夹
  5. svgDir: path.resolve(__dirname, '../src/assets/svg')
  6. };

我们使用 vue-awesome 注册自定义的 SVG 图标,使用方法如下:

  1. test.svg 放入配置文件中的指定文件夹下

  2. 在模版中使用 <icon name="svg-test"></icon> ,注意此处 name 需要加上配置文件中指定的前缀

info

在开发时向 SVG 文件夹中添加图标并不需要重启开发服务器。了解更多实现原理,可以参考 SVG loader 介绍

可选的 fontawesome 图标

和 material 图标库一样,fontawesome 包含了大量丰富的图标:
fontawesome 图标

由于 vue-awesome 已经提供了 fontawesome 中全部 SVG 格式的图标,如果想使用这些图标,方法如下:

首先修改 config/icon.js 配置文件,在 icons 数组中添加需要的图标名称

  1. {
  2. prefix: 'svg-',
  3. svgDir: path.resolve(__dirname, '../src/assets/svg'),
  4. // 项目中使用的fontawesome名
  5. icons: [
  6. 'envelope'
  7. ]
  8. }

然后使用方法与自定义 SVG 相同,只是不需要加前缀:<icon name="envelope"></icon>

info

我们只会引入 icons 中指定的 fontawesome SVG,不用担心会引入全集。