本文介绍了Vue.js 图标选择组件实践详解，分享给大家，具体如下：
背景
最近项目中在做一个自定义菜单需求，其中有一个为菜单设置小图标的功能，就是大家常见的左侧菜单
设置图标不难，方案就是字体图标，可供使用的图标库也有很多，比如阿里巴巴的 Iconfont，以及 Fontaswsome 等，问题在于如何优雅的提供几百个图标供用户选择，而不需要开发去一个一个的写标签，也不需要一个个的去找图标。
字体图标库 Fontawesome 方案
我们使用字体图标的方式，一般是一个
<i class="iconfont icon-home"></i> 这样的标签，平常开发中用一些图标都是用到一个写一个，展示10个图标，就要写10个标签。在项目中本人使用的是 Fontawesome 图标库方案，使用它是因为提供的可用图标比较丰富，基本上不需要特意去找合适的图标，直接把它的图标库下载过来，免费的有800多个。
这么多图标难道要一个一个手写800多个
i 标签吗？三连拒绝！Fontawesome 下载后的文件中提供一个 svg格式的精灵图，这个非常人性化，用 VSCode 打开这个SVG文件
可以看到是熟悉的DOM，因为SVG本质上就是一个XML，既然是DOM，那么祭出JS大法吧，用浏览器打开这个SVG文件，在控制台编写如下代码获取所有的图标名称：
const nodeArray = Array.from(document.querySelectorAll('symbol'));
const names = nodeArray.map(item => item.id)
names.toString()
Icons组件
大牛可以忽略
拿到了所有图标的 name 那就好办了，一个数组循环呗。先别急着写代码，我们的目的是封装成组件复用，那么先创建一个 Icons 组件
提供一个筛选框，然后给一个事件即可
<template>
<div class="ui-fas">
<el-input v-model="name" @input.native="filterIcons" suffix-icon="el-icon-search" placeholder="请输入图标名称"></el-input>
<ul class="fas-icon-list">
<li v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
