为element ui+Vue搭建的后台管理项目添加图标

问题：使用element UI 及Vue 2.0搭建一个后台管理项目，想要在页面中为其添加对勾及叉的图标。

解决方案：问题涉及到为页面添加图标。有两种解决方案。

（1）Element官网提供了Icon图标组件，有一套常用的图标集合，可以直接通过设置类名为 el-icon-iconName 来使用即可。将代码放进项目页面即可。参考官网的例子：

（2） 可以在项目中封装一个<svg-icon>组件

• 在src/components/SvgIcon目录下的index.vue页面上封装组件，如下图所示：

       

• 在项目路径src/icons/svg下放置需要的图标（.svg格式命名），例如：放置right.svg的对勾图标；
• 在需要的页面引入<svg-icon>组件，组件的icon-class属性即为放置的图标的名称。如下图引入right.svg的对勾图标。

        

note：以上代码只是定义组件的代码，还有相关的项目支撑代码，可能未展示。

 

小贴士：想要找到自己心仪的icon图标，可以在iconfont官网上寻找，对找到的图标还可以修改颜色、尺寸大小，选择保存的格式。一般选择svg格式，这样我们可以直接使用上面的组件，将合适的icon插入自己的页面之中。