UI提供的icon文件如何引用到项目

关于UI提供的icon文件如何引用到vue+elementui项目中

一、找到UI提供的icon文件
  找到包含下图文件的文件夹

微信截图_20190128105230.png

二、引入到vue+elementui项目中

1、fonts文件
  打开fonts文件夹如下图所示

微信截图_20190128110355.png

  接着将fonts里的所有文件复制粘贴到项目里的assets/fonts中,如果assets没有fonts文件就新建一个再粘贴进去,如下图所示
微信截图_20190128110851.png

2、css样式
  UI提供的icon文件夹中有个style.css层叠样式文档(我说的这个style.css只是我们UI提供的,可能有的命名不是style.css, 类似命名xxx.css)。
  然后将这个style.css样式中的样式依然复制粘贴到项目里的assets/sass/xxx.scss中,如果assets没有sass文件就新建一个sass文件,为了文件的以后管理及维护,需要在sass文件中再新建一个icons.scss文件之后再粘贴进去(这边我是命名为icons.scss文件)如下图所示

微信截图_20190128112400.png

  (这次我项目中引用的是scss,不过less引用icon同样是这个步骤。)

你可能感兴趣的:(UI提供的icon文件如何引用到项目)