如何在Vue+ElementUI项目中使用iconfont图标库

超、凢脫俗 2024-04-01 10:11 138阅读 0赞

如何在Vue+ElementUI项目中使用iconfont图标库

  • 1.简介
  • 2.下载iconfont中的图标
    • 2.1 首先打开iconfont官网
    • 2.2 下载SVG格式的图标，并且将他保存在购物车中
    • 2.3 点击最右边的那个购物车
    • 2.4 下载代码，解压得到
  • 3.打开Vue项目，将下载的图标保存到Vue项目中
    • 3.1 将下载的iconfont.js保存
    • 3.2 获取他的icon名称
    • 3.3 在main.js 中添加
  • 4.前端代码
  • 5.展示

1.简介

iconfont官网
iconfont中有许多样式的图标可以给我们使用。

什么是SVG格式？

SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

2.下载iconfont中的图标

2.1 首先打开iconfont官网

点击icon图标库，在这里面选择自己需要的图标下载
在这里插入图片描述

2.2 下载SVG格式的图标，并且将他保存在购物车中

一定要记住，在下载的时候，将图标放入购物车中
有人肯定疑问为什么需要将他放入购物车中？
留一个伏笔，等会为大家解释
在这里插入图片描述
在这里插入图片描述

2.3 点击最右边的那个购物车

这个里面就是你之前将想要的图标放入购物车中
在这里插入图片描述

2.4 下载代码，解压得到

在这里插入图片描述

3.打开Vue项目，将下载的图标保存到Vue项目中

我自己的话，是将所有的icon图标放在/src/asserts/icon/svg/
可以自己决定放哪
在这里插入图片描述

3.1 将下载的iconfont.js保存

这里面存储的才是真正的svg图标
在这里插入图片描述

3.2 获取他的icon名称

  1. /**
  2.  * 字体图标, 统一使用SVG Sprite矢量图标(http://www.iconfont.cn/）
  3.  *
  4.  * 使用:
  5.  *  1. 在阿里矢量图标站创建一个项目, 并添加图标(这一步非必须, 创建方便项目图标管理)
  6.  *  2-1. 添加icon, 选中新增的icon图标, 复制代码 -> 下载 -> SVG下载 -> 粘贴代码(重命名)
  7.  *  2-2. 添加icons, 下载图标库对应[iconfont.js]文件, 替换项目[./iconfont.js]文件
  8.  *  3. 组件模版中使用 [<icon-svg name="canyin"></icon-svg>]
  9.  *
  10.  * 注意:
  11.  *  1. 通过2-2 添加icons, getNameList方法无法返回对应数据
  12.  */
  13. import Vue from 'vue'
  14. import IconSvg from '@/components/icon-svg'
  15. import './iconfont'
  17. Vue.component('IconSvg', IconSvg)
  19. const svgFiles = require.context('../assets/icons/svg', true, /\.svg$/)
  20. const iconList = svgFiles.keys().map(item => svgFiles(item))
  21. const re = /\/img\/(.*)\.\w+.svg/
  22. export default {
  24.     // 获取图标icon-(*).svg名称列表, 例如[shouye, xitong, zhedie, ...]
  25.     getNameList() {
  27.         return iconList.map(item => {
  29.             return item.match(re)[1]
  30.         })
  31.     }
  32. }

3.3 在main.js 中添加

下载的iconfont.js文件导入到main中

  1. import '@/icons/iconfont'

4.前端代码

  1. <el-form-item label="菜单图标" :label-width="formLabelWidth">
  2.             <el-popover
  3.               v-model="iconListVisible"
  4.               ref="iconListPopover"
  5.               placement="bottom-start"
  6.               trigger="click"
  7.               popper-class="mod-menu__icon-popover"
  8.             >
  9.               <div class="mod-menu__icon-inner">
  10.                 <div class="mod-menu__icon-list">
  11.                   <el-button
  12.                     v-for="(item, index) in iconList"
  13.                     :key="index"
  14.                     @click="iconListCurrentChangeHandle(item)"
  15.                     :class="{ 'is-active': dialogForm.icon === item }"
  16.                   >
  17.                     <svg class="icon-svg" aria-hidden="true">
  18.                       <use :xlink:href="`#${item}`"></use>
  19.                     </svg>
  20.                   </el-button>
  21.                 </div>
  22.               </div>
  23.             </el-popover>
  24.             <el-input
  25.               v-model="dialogForm.icon"
  26.               v-popover:iconListPopover
  27.               :readonly="true"
  28.               placeholder="菜单图标名称"
  29.               class="icon-list__input"
  30.             ></el-input>
  31.           </el-form-item>

最主要的代码就是：

  1. <el-button
  2.                     v-for="(item, index) in iconList"
  3.                     :key="index"
  4.                     @click="iconListCurrentChangeHandle(item)"
  5.                     :class="{ 'is-active': dialogForm.icon === item }"
  6.                   >
  7. <svg class="icon-svg" aria-hidden="true">
  8. <use :xlink:href="`#${item}`"></use>
  9. </svg>
  10.  </el-button>
  13. <script>
  14. export default {
  17. data() {
  19.     return{
  21.     iconList: [],
  22.     }
  23. },
  25. methods:{
  27. init() {
  29.       this.iconList = Icons.getNameList();
  30.     },
  31. },
  32. mounted() {
  34.     this.init();
  35.   },
  37. }
  38. </script>

样式代码：

  1. .icon-svg {
  3.   width: 1em;
  4.   height: 1em;
  5.   fill: currentColor;
  6.   overflow: hidden;
  7. }

5.展示

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，138人围观）

还没有评论，来说两句吧...

相关阅读