ElementUI Ico、elementui icon图标

在开发基于ElementUI的项目时，如果需要使用图标，一个直接有效的解决方案是利用ElementUI自带的Icon组件。它提供了丰富且美观的图标集，可以快速集成到项目中，满足各种场景下的图标需求。

1. 使用ElementUI内置图标

这是最简单的方式，只需引用ElementUI库，然后按照官方文档提供的方法来使用图标。

html
<!-- 引入ElementUI -->
</p>





<div id="app">
  <!-- 使用图标 -->
  
    <i class="el-icon-search"></i> 搜索
  
</div>


new Vue({
  el: '#app'
})


<p>

2. 自定义图标

当内置图标不能满足需求时，可以通过以下几种方式添加自定义图标：

2.1 引入字体图标文件

如果有一套字体图标（如iconfont），可以将其引入项目。

css
/* 在样式文件中引入 */
@import url('//at.alicdn.com/t/font_1234567890.css');


html
<i class="iconfont icon-search"></i>


2.2 使用svg图标

对于更复杂的图标，可以使用svg格式。

html

  <div>
    
      
    
  </div>
</p>


.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}


<p>

并且需要提前将svg文件注册到项目中。

3. 图标管理与优化

为了更好地管理和使用图标，可以创建一个图标组件。

javascript
// Icon.vue

  <i></i>
</p>


export default {
  props: {
    name: String
  }
}


<p>

这样可以在使用时更加方便：

html
<my-icon name="search"></my-icon>


通过以上多种方式，可以根据项目的具体需求选择合适的方法来使用和管理ElementUI中的图标，使页面更加美观和功能完善。