一、ElementIcon图标
ElementIcon的图标风格整洁简约,边框线条细腻,非常适合用于任何类型的网站或App。其中的每个图标都有一个独特的类名,可以非常方便地在项目中引用。
以下是一些常用图标的代码和效果:
//搜索图标 //下载图标 //删除图标
二、ElementIcon图标如何CDN引入
ElementIcon提供多种方式引入图标,其中较为方便的一种就是CDN引入。ElementIcon图标可以通过jsDelivr或unpkg站点进行引入,代码如下:
//jsDelivr引入 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/fonts/element-icons.woff2"> //unpkg引入 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff2">
通过以上代码,我们可以非常方便地引入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都可以提供高品质、高效率的图标支持,让我们在开发过程中轻松获得更美观的效果。