如何在Vue+ElementUI项目中使用iconfont图标库

1.简介

iconfont官网
iconfont中有许多样式的图标可以给我们使用。

什么是SVG格式?

SVG是一种图形文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。

2.下载iconfont中的图标

2.1 首先打开iconfont官网

点击icon图标库,在这里面选择自己需要的图标下载
在这里插入图片描述

2.2 下载SVG格式的图标,并且将他保存在购物车中

一定要记住,在下载的时候,将图标放入购物车中
有人肯定疑问为什么需要将他放入购物车中?
留一个伏笔,等会为大家解释
在这里插入图片描述
在这里插入图片描述

2.3 点击最右边的那个购物车

这个里面就是你之前将想要的图标放入购物车中
在这里插入图片描述

2.4 下载代码,解压得到

在这里插入图片描述

3.打开Vue项目,将下载的图标保存到Vue项目中

我自己的话,是将所有的icon图标放在/src/asserts/icon/svg/
可以自己决定放哪
在这里插入图片描述

3.1 将下载的iconfont.js保存

这里面存储的才是真正的svg图标
在这里插入图片描述

3.2 获取他的icon名称

/**
 * 字体图标, 统一使用SVG Sprite矢量图标(http://www.iconfont.cn/)
 *
 * 使用:
 *  1. 在阿里矢量图标站创建一个项目, 并添加图标(这一步非必须, 创建方便项目图标管理)
 *  2-1. 添加icon, 选中新增的icon图标, 复制代码 -> 下载 -> SVG下载 -> 粘贴代码(重命名)
 *  2-2. 添加icons, 下载图标库对应[iconfont.js]文件, 替换项目[./iconfont.js]文件
 *  3. 组件模版中使用 [<icon-svg name="canyin"></icon-svg>]
 *
 * 注意:
 *  1. 通过2-2 添加icons, getNameList方法无法返回对应数据
 */
import Vue from 'vue'
import IconSvg from '@/components/icon-svg'
import './iconfont'

Vue.component('IconSvg', IconSvg)

const svgFiles = require.context('../assets/icons/svg', true, /\.svg$/)
const iconList = svgFiles.keys().map(item => svgFiles(item))
const re = /\/img\/(.*)\.\w+.svg/
export default {
    // 获取图标icon-(*).svg名称列表, 例如[shouye, xitong, zhedie, ...]
    getNameList() {
        return iconList.map(item => {
            return item.match(re)[1]
        })
    }
}

3.3 在main.js 中添加

下载的iconfont.js文件导入到main中

import '@/icons/iconfont'

4.前端代码

<el-form-item label="菜单图标" :label-width="formLabelWidth">
            <el-popover
              v-model="iconListVisible"
              ref="iconListPopover"
              placement="bottom-start"
              trigger="click"
              popper-class="mod-menu__icon-popover"
            >
              <div class="mod-menu__icon-inner">
                <div class="mod-menu__icon-list">
                  <el-button
                    v-for="(item, index) in iconList"
                    :key="index"
                    @click="iconListCurrentChangeHandle(item)"
                    :class="{ 'is-active': dialogForm.icon === item }"
                  >
                    <svg class="icon-svg" aria-hidden="true">
                      <use :xlink:href="`#${item}`"></use>
                    </svg>
                  </el-button>
                </div>
              </div>
            </el-popover>
            <el-input
              v-model="dialogForm.icon"
              v-popover:iconListPopover
              :readonly="true"
              placeholder="菜单图标名称"
              class="icon-list__input"
            ></el-input>
          </el-form-item>

最主要的代码就是:

<el-button
                    v-for="(item, index) in iconList"
                    :key="index"
                    @click="iconListCurrentChangeHandle(item)"
                    :class="{ 'is-active': dialogForm.icon === item }"
                  >
<svg class="icon-svg" aria-hidden="true">
<use :xlink:href="`#${item}`"></use>
</svg>
 </el-button>


<script>
export default {

data() {
	return{
	iconList: [],
	}
},

methods:{
init() {
      this.iconList = Icons.getNameList();
    },
},
mounted() {
    this.init();
  },

}
</script>

样式代码:

.icon-svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}

5.展示

在这里插入图片描述

  • 5
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
如果你在Vue无法使用Element UI,可能有几个原因。首先,确保你已经正确引入了Element UI的组件。你可以按需引入Element UI的组件,例如Notification,然后通过调用该组件来显示通知。你可以使用以下代码示例来显示一个成功的通知: import { Notification } from 'element-ui'; Notification({ title: "成功", message: msg, type: "success", position: "top-left", duration: 1000, showClose:false }); 另外,你还需要确保在Vue实例正确地挂载了Element UI的组件。你可以在创建Vue实例之前,通过import Vue from "vue"来引入Vue,并在创建Vue实例之后,通过vue.$notify来调用Element UI的通知组件。你可以使用以下代码示例来显示一个成功的通知: import Vue from "vue"; const vue = new Vue(); vue.$notify({ title: "成功", message: msg, type: "success", position: "top-left", duration: 1000, showClose:false }); 希望这些解决方法能帮助你解决Vue无法使用Element UI的问题。如果仍然存在问题,请检查你的代码和配置,确保正确引入和使用了Element UI的组件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue项目js文件无法使用element-ui组件](https://blog.csdn.net/weixin_45938584/article/details/106821109)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Vue使用ElementUI使用第三方图标库iconfont的示例](https://download.csdn.net/download/weixin_38746918/12951063)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

毕竟尹稳健

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值