您的位置:

ElementIcon——多功能图标库

ElementIcon是一款UI框架element-ui的官方图标库,其中包含了一系列精美的图标,可以在Web应用中广泛应用。除此之外,ElementIcon不仅支持CDN引入,还提供了常用的SVG、Webfont、Symbol等多种格式,方便开发者根据需求自由选择。

一、ElementIcon图标

ElementIcon的图标风格整洁简约,边框线条细腻,非常适合用于任何类型的网站或App。其中的每个图标都有一个独特的类名,可以非常方便地在项目中引用。

以下是一些常用图标的代码和效果:

//搜索图标


//下载图标


//删除图标

二、ElementIcon图标如何CDN引入

ElementIcon提供多种方式引入图标,其中较为方便的一种就是CDN引入。ElementIcon图标可以通过jsDelivr或unpkg站点进行引入,代码如下:

//jsDelivr引入
<link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/fonts/element-icons.woff2&quot;>

//unpkg引入
<link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff2&quot;>

通过以上代码,我们可以非常方便地引入ElementIcon图标,从而在项目中使用它们。

三、SVG格式的ElementIcon图标

除了Webfont格式,ElementIcon还提供SVG格式的图标,开发者可以根据项目需要自由选择。以下是一个引入SVG格式ElementIcon图标的例子:

//引入element-ui的js和css
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

//在模板中引用svg组件和icon
<template>
  <div>
    <el-icon name="logo"></el-icon>
  </div>
</template>

//在JS中声明
import { Icon } from 'element-ui';
Icon.register({
  'logo': {
    viewBox: '0 0 1024 1024',
    d: '...'
  }
});

通过以上方式,我们可以使用ElementIcon的SVG图标,并将其引入到我们需要的地方。

四、Symbol格式的ElementIcon图标

ElementIcon还可提供Symbol格式的图标,可以通过在元素上添加class el-icon-[名称] 来呈现 ElementIcon 的 Symbol 图标。以下是一个使用Symbol格式ElementIcon的例子:

<!-- 通过链接– –>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入 ElementUI JS -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!-- 使用 -->
<i class="el-icon-success"></i>

在以上例子中,我们将引用ElementUI的相关库,然后使用class el-icon-success引用了一个Symbol格式的ElementIcon图标。该方式非常简单易用,且可以通过添加不同的class来使用不同的图标。

五、总结

ElementIcon具有多种使用方式和格式,可以极大地方便我们在开发UI时引用并使用多种类型的图标。无论是Webfont格式、SVG格式还是Symbol格式,ElementIcon都可以提供高品质、高效率的图标支持,让我们在开发过程中轻松获得更美观的效果。