Element Plus的el-icon怎么用

目录
  • 初步了解
    • Icon 在 Element UI 和 Element Plus 用法上的差别
    • Icon 在 Element Plus 中的使用逻辑
  • 只使用 svg
    • 全局引入
    • 局部引入
  • 配合 el-icon 一起使用
    • 全局引入
    • 局部引入

Vue 生态里, Element UI 是排名前列的组件库。 在 Vue 发布到 3.0 时,Element 也发布了对应的组件库。也就是 Element Plus 。随之而来的用法也跟着变了。

比如本文要讲的 el-icon 的用法。

Element Plus 里,Icon 图标 的用法和以前不一样了。虽然官方文档也有说明怎么用,但不是非常详细,可能会给新手带来一丢丢障碍。

本文将花几分钟的时间讲解 el-icon 几种用法和注意事项。

注意:需要留意本文发表时间与使用的 Element Plus 版本,随着时间的推移可能会出现使用上的差异。

  • vue: ^3.2.25
  • element-plus: ^2.1.7
  • @element-plus/icons-vue: ^1.1.4

初步了解

Icon 在 Element UI 和 Element Plus 用法上的差别

vue2 + Element UI 的用法

<i class="el-icon-edit"></i>

vue3 + Element Plus 的用法

<ElIcon :size="30" color="hotpink">
  <edit />
</ElIcon>

<!-- 也可以直接使用图标标签,无需父标签包裹 -->
<edit />

个人觉得,Element UI 的用法会更加简单。

下一篇文章我会讲解如何在 Element Plus 的基础上二次封装出一个更好用的 Icon组件

Icon 在 Element Plus 中的使用逻辑

Element Plus 抛弃了字体图标的用法,直接使用了 svg 的方式。

可以说,图标这个东西被拎出来单独维护了。所以在使用前必须把 svg图标库 下载下来。

下载 svg图标库 的命令:

npm install @element-plus/icons-vue

你也可以使用 Yarnpnpm 的方式下载

# Yarn
yarn add @element-plus/icons-vue

# pnpm
pnpm install @element-plus/icons-vue

使用的方式有2种,一种是直接使用 svg,另一种是配合 el-icon 标签一起使用。

接下来就分别讲讲这两种使用方式(全局和局部引入都会讲到)

只使用 svg

如果你只需使用 Element Plus 提供的 svg图标库 的话,是可以不安装 Element Plus 的。不过这种场景应该很少出现。

安装命令:

npm install @element-plus/icons-vue

Element Plus 提供的 svg图标 种类可以到 图标集合 里查看。

通过 svg组件 的方式使用图标,如需设置图标大小和颜色,都需要通过 css 来设置。

全局引入

全部引入的方式会将所有 svg组件 都注册到全局,用的时候比较方便,但会牺牲一点性能。

main.js

import { createApp } from 'vue'
import App from './App.vue'
import * as Icons from '@element-plus/icons-vue' // 引入所有图标,并命名为 Icons

const app = createApp(App)

// 通过遍历的方式注册所有 svg组件,会牺牲一点点性能
for (let i in Icons) {
  app.component(i, Icons[i])
}

app.mount('#app')

如果你不想全部引入,只是想在全局注册某个 svg图标组件,可以用以下方式在 main.js 里注册(我以 Edit 图标为例)

/* 省略部分代码 */
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 图标

const app = createApp(App)

app.component(Edit.name, Edit) // 全局注册 Edit 图标

app.mount('#app')

在页面中使用

<template>
  <div>
    <edit />
  </div>
</template>

<style>
svg {
  width: 40px;
  height: 40px;
  color: red;
}
</style>

局部引入

局部引入的方式只需在使用的地方引入即可。

<template>
  <div>
    <edit />
  </div>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 这个 svg组件
</script>

<style>
svg {
  width: 40px;
  height: 40px;
  color: red;
}
</style>

配合 el-icon 一起使用

Element Plus 还提供了 el-icon 组件用来包裹 svg图标组件 ,使得设置图标大小和颜色更加方便。

但需要在项目中安装 Element Plus ,安装命令如下:

# 选择其中一种方式安装即可。

# NPM
npm install element-plus --save

# Yarn
yarn add element-plus

# pnpm
pnpm install element-plus

安装完 Element Plus 后,可以在全局引入,也可以局部引入。

全局引入

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 图标
import App from './App.vue'

const app = createApp(App)
app.component(Edit.name, Edit) // 全局注册 Edit 图标

app
.use(ElementPlus)
.mount('#app')

在页面中使用

<el-icon :size="20" color="hotpink">
  <edit />
</el-icon>

此时,在 el-icon 上设置 sizecolor 就能控制 svg图标 的大小和颜色。

需要注意的是 size 属性必须传数字,不能传字符串进去!

局部引入

<template>
  <div>
    <el-icon :size="30" color="hotpink">
      <edit />
    </el-icon>
  </div>
</template>

<script setup>
import { ElIcon } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
import 'element-plus/es/components/icon/style/css'
</script>

局部引入的话,我们只需要引入 icon 对应的 css 即可。

如果你在 main.js 引入了 element-plus/dist/index.css 就不需要在页面再引入 element-plus/es/components/icon/style/css

到此这篇关于Element Plus的el-icon怎么用的文章就介绍到这了,更多相关Element Plus el-icon内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3中使用Element Plus时el-icon无法显示的问题解决

    目录 问题描述 解决方案 总结 问题描述 按照官方文档安装了icons $ npm install @element-plus/icons 然后在页面中使用 <template> <!-- <Header /> --> <!-- Icon 图标 --> <el-icon><edit /></el-icon> <el-icon><fold /></el-icon> <el-icon&

  • Element Plus的el-icon怎么用

    目录 初步了解 Icon 在 Element UI 和 Element Plus 用法上的差别 Icon 在 Element Plus 中的使用逻辑 只使用 svg 全局引入 局部引入 配合 el-icon 一起使用 全局引入 局部引入 在 Vue 生态里, Element UI 是排名前列的组件库. 在 Vue 发布到 3.0 时,Element 也发布了对应的组件库.也就是 Element Plus .随之而来的用法也跟着变了. 比如本文要讲的 el-icon 的用法. 在 Element

  • 利用JavaScript编写一个花里胡哨的点击按钮

    目录 正片 结构就两行 样式 表现 正片 小轮播图滑动滚播,好不好看你说了算. 视频演示 结构就两行 <main> <div class="grid"> <div class="grid__item theme-1"> <button class="action"><svg class="icon icon--rewind"> <use xlink:href=&

  • backbone简介_动力节点Java学院整理

    简介 Web 应用程序越来越关注于前端,使用客户端脚本与 Ajax 进行交互.由于 JavaScript 应用程序越来越复杂,如果没有合适的工具和模式,那么 JavaScript 代码的高效编写.非重复性和可维护性方面会面临挑战.模型-视图-控制器 (MVC) 是一个常见模式,可用于服务器端开发以生成有组织以及易维护的代码.MVC 支持将数据(比如通常用于 Ajax 交互的 JavaScript Object Notation (JSON) 对象)从表示层或从页面的文档对象模型 (documen

  • 简单了解Backbone.js的Model模型以及View视图的源码

    Backbone.Model 今天我们先来谈谈Backbone.js MVC 中的 M , Model是backbone的核心部分,包含着页面展示内容的数据,还有围绕着数据操作的各种 转换,校验,计算 ,权限控制,服务端交互等等操作,你可以通过 Backbone.Model.extend() 生成你的model , 当然生成的model也可以作为一个基类去向下扩展更多的model var People = Backbone.Model.extend({ }); var Man = People.

  • angularJS 入门基础

    angular 所有用到的库, 全部用的CDN: 复制代码 代码如下: <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>     <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>     <link h

  • jquery实现的鼠标拖动排序Li或Table

    1.前端页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

  • jQuery 1.0.2

    复制代码 代码如下: /* prevent execution of jQuery if included more then once */ if(typeof window.jQuery == "undefined") { /*  * jQuery 1.0.2 - New Wave Javascript  *  * Copyright (c) 2006 John Resig (jquery.com)  * Dual licensed under the MIT (MIT-LICEN

  • 手机端点击图片放大特效PhotoSwipe.js插件实现

    PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ 但有一点不太好的是图片放大后再单击不能关闭浏览,要点击关闭按钮或者滑动才能关闭,找了好久配置项都没说到这点上的,只能自己动手改了. 打开photoswipe.js,大概在3179行有个关于tap的函数定义 在开头先定义一个变量 var tap_num = 0; 然后在onTapStart的定义里加入 //根据需求自己添加的S //判断

  • SVG动画vivus.js库使用小结(实例代码)

    SVG动画vivus.js库使用整理,具体实例代码如下所示: 使用方法如图: HTML例子代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta

  • js实现登录框鼠标拖拽效果

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录框鼠标拖拽效果</title> <style type="text/css"> body { background: url("https://timgsa.baidu.com/timg?i

随机推荐