ivue-admin中自定义图标问题进行处理（续）

ivue-admin中自定义图标问题进行处理（续）
接着上篇文章谈到的 ivue-admin中自定义图标问题进行处理 问题，这篇是在上篇的基础之上来分析这个图标的class命名上自定义，因为他这个vue-admin针对用户自定义图标的演示是导入的iconfont图标，如果不是iconfont图标文件，而是其他的图标文件，比如说fontawesome、glyphicons呢？那不就完全被加上了iconfont前缀了

问题汇总

• 自定义图标的class带前缀问题
• 如果非要实现一键粘贴图标class操作，就是比如说class带icon的，我要加上去
• 下划线用来分辨自定义图标，可不可以使用带“点号”呢？

一、自定义图标的class带前缀问题

先看下上篇文章解决所采取的措施：

1、使用阿里的矢量图标库文件；
2、由于ivue-admin使用的也是阿里的矢量图标库吧，字体的family都没有发生变化；
3、ivue-admin中的自定义图标引入的iconfont的文件路径在iview-admin-master\iview-admin-master\src\assets\icons下面
综合三点，发现上篇的文章就只是重新再阿里矢量图标库的官网选取了几个图标，并且有些图标在iview-admin-master\iview-admin-master\src\view\components\icons.vue里面是没有显示出来的，因为图标的命名不在导致的，这个问题可以直接忽略

问题假设

那么问题来了，假设你是会制作图标文件的，你给family起了一个与众不同的名字，比如使用flayTo来命名你这款字体图标，就会导致图标完全不能够显示出来，因为不管你怎么改动都有一个iconfont icon-名称在class上面，完全在干扰我的图标显示。

找到icons.vue所导入的组件，看看里面干了什么？？？

_c简写方式真正代表的完全路径寻找

但是发现路径_c根本不存在，而且这应该算是一个绝对路径，如果相对的话应该有点号或者同级目录存在的命名呀，这完全没有。

最后在ivue-admin根目录下找到了一个配置文件，叫vue.config.js

打开它之后，看到了一个比较有代表的关键字“_c”

原来如此，“_c”就是根目录下的src\components文件夹啊！！！

先看看icons组件吧

因为在ivue-admin上的自定义图标页面提示了这句“需要在自定义图标名称前加下划线_”。
如果简单分析下这句话，可以得到一个信息，就是在自定义图标组件common-icon一定会有个判断名称带不带下划线“_”，那个不是自定义图标组件icons肯定是一个比较基础的，先从基础的入手看看（这个是我个人的分析，可以借鉴）

打开icons文件夹，

直接看vue文件吧

删掉前缀代表iconfont icon-，f12进行观察class的变化

得出一个简单的结论：
1、iconfont icon-的前缀似乎会影响common-icon组件上class的下划线；
2、前缀的删除这并不会影响使用，反倒是common-icon似乎觉得像是多余的组件了。
但是并不希望让common-icon成为多余的组件，看看和icons组件有什么联系吧。

还是同样的看vue文件

那么可以得知common-icon这个组件就是用来切换ivue-admin里自定义组件Icons 和  ivue自带的Icon组件。
ivue-admin是ivue衍生出来的一款后台管理框架，ivue就像是bootstrap，而ivue-admin就相当于是使用了ivue技术编写出来的，而ivue是基于vue来编写的，真是一层一层的关系，要想弄清楚ivue-amdin就要学下ivue，最终还是要学vue这个技术。

二、一键粘贴图标class操作

什么？你要复制粘贴？？？
最好不要干这傻事，什么叫干傻事？我这是想图个简单，再说也谈不上是搬代码的，这叫做创新！懂否，而且下划线还要缩写图标名称才办的到，比如下面几个图：

图一：

图二：

图三：
并不能达到完全复制的效果：
1、ivue-admin自定义图标它要下划线；
看下面自定义图标采用点号

2、ivue-admin自定义图标它要简写图标的名称；
这个可以修改icons组件内容来修改

其实发现还是不能实现真正的复制。

1、如果要下划线，这个可以不要嘛？

不行，common-icon跟你说的作用你忘记了，它是用来切换的，所以不合适，而且图标还是出现不了
但是不要忘记了，还有一个Icons组件，这个组件可没有那种逻辑判断，是一个傻瓜式组件，写啥就给你加上啥，但是这样一写就直接写死了，不能从自定义icons切换到了icon，毕竟可能项目开发中还是会有icon组件的图标内容（也就是会使用到ivue里自带的图标样式），如果确定了整个项目中都采用了自定义图标，可以摒弃掉common-icon直接上手icon，可能这样写的话，兼容性不是很强，除非你从头到尾写ui的每一个界面或者每一个组件

结论：
common-icon需要加上一个标识来切换自定义组件icons和ivue自带的icon组件，兼容性比较强；
icons则需要全项目统一使用自定义图标，可以不加前缀，如果有些组件用到了common-icon的话就尴尬，不能切换到icon组件，也就是ivue里定义的图标出现不了。

2、从自定义图标的名称简写这个可以吧

由于ivue-admin默认要我们简写名称，因为它个给我们加了默认的前缀名称，所以让我们使用图标名称缩写的方法来实现自定义图标。但是我偏不，我要完整的显示我的图标名称，我的图标名称可不像你说的那么规则化，比如icon-admin,icon-super,aaa-person,bbb-rabbit；
看到没出现了aaa-、bbb-，这样还能简写吗，要是简写肯定会有问题的

到此，我的目标就是实现图标名称的全称，就是我的图标名称为abc-android-love-and-you-lou0-woer-po-wo
，举例一个比较特别的例子，因为跟ivue-admin所使用的前缀不同，因此，可以这样实现：
图标都统一为一个family的，后面的就不要

上面的class前缀为iconfont icon-，改为family前缀，修改后如下：
记得要加个空格，不要问为什么，css多个class类样式设置是不是要用空格区分！

结论：
如果定义前缀的时候，要考虑到图标名称不统一的情况下，需要采用图标全称（图标命名随意的情况下）；
否则就是简称，缩写图标名称，前缀就用：family 前缀符
前缀符是统一图标命名，比如73班，你知道是那个班级吗，假设有重复的班级名称73班呢，可以加个九年73班、2019年73班、2005年73班，用年份作为时间节点划分班级。这里的前缀符，只是图标的名称命名习惯，如果要简写就必须要统一图标前缀符，方式固定不变（图标命名统一的情况下,可以提取相同的关键字）。

自定义图标采用下划线（“_”）方式，可以换一种方式，比如说点号呢（“.”）

这个操作就是从命名习惯上看下划线这个区分方式不好，你也可以定义自己的区分方式，它这里面就是一个查找，找到了就用Icons没有就用Icon