element使用自定义icon图标的详细步骤

使用自定义icon图标是element UI中一个非常实用的功能。本文将详细讲解如何在element UI中使用自定义icon图标，步骤如下：

1. 导入需要的icon图标

为了使用自定义icon图标，我们需要将需要的icon图标导入到我们的工程目录中。可以使用第三方图标库，如iconfont、Font Awesome等，这里以iconfont为例。

在iconfont网站上，选择需要的图标，添加到项目中，然后下载至本地。下载后，将下载的字体文件和CSS文件放入到我们项目的指定位置。

具体步骤如下：

1. 打开iconfont官网（链接地址： https://www.iconfont.cn/）;

2. 在搜索框输入关键字，选择你需要的图标；

3. 点击“添加至项目”，添加到自己的项目中；

4. 进入项目页，点击“下载至本地”；

5. 解压下载的文件，将font文件夹和iconfont.css文件复制到项目中。

2. 使用iconfont的字体图标

在项目中，使用font-family属性来指定使用字体库中的icon字体。在element UI中，可以使用以下方式引入iconfont图标：

<link rel="stylesheet" href="./font/iconfont.css">

首先在HTML文件中引用我们下载的CSS文件。

<template>
  <!-- 使用el-icon-iconname方式引入 -->
  <div>
    <i class="el-icon-github"></i> 使用el-icon方式引入图标
  </div>

  <!-- 使用font-iconfontname方式引入 -->
  <div>
    <i class="font-iconfontname icon-github"></i> 使用font-icon方式引入图标
  </div>
</template>

<script>
export default {
  name: "TestDemo",
};
</script>

<style>
  /*样式可自行美化*/
  .font-iconfontname {
    font-size: 20px;
    font-style: normal;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>

然后在HTML文件中使用“el-icon-图标名称”或“font-图标名称”来引入我们需要的图标。

例如，使用“el-icon-github”引入github图标，使用“font-iconfontname icon-github”引入github图标。其中font-iconfontname为CSS中的字体库名称，icon-github为图标名称，详细请参考CSS文件。

示例说明

示例一：使用iconfont字体库

本示例使用iconfont的字体图标来创建一个简单的页面。

1. 下载需要的字体库与CSS样式文件，将其放置到项目工程的目录下。

2. 在HTML文件中引入CSS样式文件

3. 在HTML文件中使用“font-iconfontname icon-图标名称”的方式引入需要的图标。

<template>
  <div class="m-iconfont-demo">
    <h3>Iconfont字体库使用示例</h3>
    <i class="font-iconfontname icon-github"></i>
    <i class="font-iconfontname icon-wechat"></i>
    <i class="font-iconfontname icon-chat"></i>
    <i class="font-iconfontname icon-fire"></i>
  </div>
</template>

<script>
export default {
  name: "IconfontDemo",
};
</script>

<style scoped>
.m-iconfont-demo {
  font-size: 24px;
  text-align: center;
  padding: 20px;
}

/* 指定字体库名称 */
.font-iconfontname {
  font-family: "iconfont" !important;
}
/* 字体大小 */
.icon-github {
  font-size: 30px;
}
.icon-wechat {
  font-size: 24px;
}
.icon-chat {
  font-size: 18px;
}
.icon-fire {
  font-size: 50px;
}
</style>

在这个示例中，我们在.vue文件中使用了iconfont字体图标库中的四个图标，展示了它们在我们的页面上的显示效果。

示例二：使用自定义SVG图标

本示例介绍如何使用我们自己的SVG图标来创建一个简单的页面

1. 准备需要的SVG图标文件，通过在线转换工具或者使用Illustrator等矢量图形软件，将SVG图标转换成data:URI格式，并保存到变量中。

2. 在HTML文件中使用“el-icon-自定义图标名称”的方式引入需要的图标。

<template>
  <div class="m-svg-demo">
    <h3>自定义SVG图标使用示例</h3>
    <i class="el-icon-weibo"></i>
    <i class="el-icon-qq"></i>
    <i class="el-icon-svgicon"></i>
    <i class="el-icon-custom-svg"></i>
  </div>
</template>

<script>
const weibo = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0i
ZmlsbDogdXJsKCNtb2JpbGUpOyI+PGNpcmNsZSBmaWxsPSIjZmZmIiB3aWR0aD0iMTAwJSc+CiAgP
GcgaWQ9ImEiIHN0eWxlPSJmaWxsOiMwMEU0RDA7IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHRyYW5
zZm9ybT0ibWF0cml4KDEuNzQ1MDUgMCAwIDEgMS4yNTMzMDI5MyA2My4wODM0NDk5KSI+CiAgICA8
cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTI1IC03MmgyNEMzMy4yNzIgNzIgMTkuODMzIDEzNy41IDEx
My4yNzIgMTYzLjQ1SDkzLjQ1MlY0MEgyNkwxMzguNSA3MiAzMy42MDcgNzJ6TTEyNSAxMzcuNVYx
MTMuMjcySDczLjUgMTI5YzAtMTkuNjg4LTEwLjYwMS0zOS4yNS0zOS4yNS0zOS4yNXYxNy41YzAt
MTkuNjg4LTEwLjYwMS0zOS4yNS0zOS4yNS0zOS4yNXptLTMzLjA4NSAxMTQuMjcyYy0wLjAyLTEu
NTM4LTAuOTYzLTMuMzM0LTAuOTYzLTQuNjY0LjY2NGMwIDEyLjM1MSAxMGw3LjA2NSAyLjExNEM2
NC44OTctNzIgMzIuMTItNzIgMTI1IDczLjVWNjYuNjY0YzAtMTIuMzUxLTEwLjg1Ny0zMS44NDkt
MzEuODQ5LTMxLjg0OWw3LjA2NSAyLjExNEMzNC44OTctMTQ1Ljk4MSAzMi4xMi0xNDUuOTgxIDEy
NSAxMzcuNVoiLz4KICA8L2c+Cjwvc3ZnPgo=`;

const qq = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA4IiBoZWlnaHQ9IjEwOCIgdmlld0JveD0iMCAw
IDEwOCAxMDgiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5TLWljb24iIHN0eWxlPSJmaWxsOiNy
Z2IoMCwgMjEsIDIyLCAyMSk7IiB2ZXJzaW9uPSIxLjEiPgo8Zz4KCTxjaXJjbGUgZmlsbD0iI2Zm
ZiIgY3g9IjIxIiBjeT0iMjEiIGN5PSIxOCIgcj0iMTYiLz4KCTxnPgogCTxjaXJjbGUgZmlsbD0i
I2M1M2UxMSIgY3g9IjM1IiBjeT0iMjEiIGN5PSIxNyIgcj0iMTYiLz4KPC9nPgo8L3N2Zz4K`;

export default {
  name: "SvgDemo",
  data() {
    return {
      customSvg: weibo,
    };
  },
};
</script>

<style>
.m-svg-demo {
  font-size: 24px;
  text-align: center;
  padding: 20px;
}
</style>

在这个示例中，我们在.vue文件中使用了四个element UI自带的图标（weibo、qq、svgicon、custom-svg）和一个我们自定义的SVG图标。需要注意的是，在这里使用自定义的SVG图标需要将SVG图标转换成data:URI格式，并定义在vue文件的data中。