iconfont的组件化使用方法(SVG)

2024-02-27 08:12

本文主要是介绍iconfont的组件化使用方法(SVG),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 一、需求描述
  • 二、操作步骤
    • 1.在iconfont中选择项目需要使用的图标
    • 2.在项目中创建iconfont.js
    • 3.创建svgIcon组件

一、需求描述

  1. 将iconfont图标库选择的图标以SVG的形式引入项目
  2. 并通过组件化的形式在项目中引用
  3. 可控制图标的大小和颜色

二、操作步骤

1.在iconfont中选择项目需要使用的图标

在这里插入图片描述
复制图片中的代码(全部复制)
在这里插入图片描述

2.在项目中创建iconfont.js

在项目中创建iconfont.js,并将复制的代码粘贴
在这里插入图片描述

3.创建svgIcon组件

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconClassName" :fill="color" /></svg>
</template><script setup>
import { computed } from 'vue'
const props = defineProps({iconName: {type: String,required: true},className: {type: String,default: ''},color: {type: String,default: '#333333'},size: {type: String,default: '16px'}
})
// 图标在 iconfont 中的名字
const iconClassName = computed(() => {return `#${props.iconName}`
})
// 给图标添加上类名
const svgClass = computed(() => {if (props.className) {return `svg-icon ${props.className}`}return 'svg-icon'
});
</script><style scoped lang="less">
.svg-icon {/* v-bind 是 Vue3 才支持的功能,可以将 CSS 的值与 js 的值绑定 */width: v-bind('props.size');height: v-bind('props.size');position: relative;fill: currentColor;vertical-align: -2px;
}
</style>
  1. <template> 部分:

    • <svg :class="svgClass" aria-hidden="true">:定义了一个 <svg> 元素,通过 :class 动态绑定了类名,根据 svgClass 变量的值添加类名。
    • <use :xlink:href="iconClassName" :fill="color" />:使用 <use> 元素来嵌套引用SVG图标,xlink:href 属性使用了动态绑定,根据 iconClassName 变量的值设置图标的引用路径,而 fill 属性则根据 color 变量的值设置图标的颜色。
  2. <script setup> 部分:

    • import { computed } from 'vue':引入Vue 3中的 computed 函数,用于创建响应式计算属性。
    • const props = defineProps({...}):使用 defineProps 定义了组件的 props,包括 iconName(图标名称)、className(类名)、color(颜色)和 size(大小)等。
    • const iconClassName = computed(() => {...}):通过 computed 创建一个计算属性 iconClassName,该属性返回一个拼接好的图标类名,用于在 xlink:href 中引用对应的SVG图标。
    • const svgClass = computed(() => {...}):创建计算属性 svgClass,根据条件动态设置图标的类名,包括了用户传递的 className 和默认的 svg-icon 类名。
  3. <style scoped lang="less"> 部分:

    • .svg-icon:定义了SVG图标的基本样式,包括宽度、高度、相对定位、填充颜色等。v-bind('props.size') 使用了Vue 3的新特性,将 props.size 动态绑定到CSS中,实现图标大小的动态设置。
    • vertical-align: -2px;:用于微调图标的垂直对齐,使得图标在垂直方向上更加居中。

这个组件允许用户通过传递不同的 iconNameclassNamecolorsize 属性来渲染不同的SVG图标,并且具有一些默认值。同时,通过使用Vue 3的新特性,使得组件更加灵活和易于使用。

这篇关于iconfont的组件化使用方法(SVG)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/751767

相关文章

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》:本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI

java图像识别工具类(ImageRecognitionUtils)使用实例详解

《java图像识别工具类(ImageRecognitionUtils)使用实例详解》:本文主要介绍如何在Java中使用OpenCV进行图像识别,包括图像加载、预处理、分类、人脸检测和特征提取等步骤... 目录前言1. 图像识别的背景与作用2. 设计目标3. 项目依赖4. 设计与实现 ImageRecogni

Git中恢复已删除分支的几种方法

《Git中恢复已删除分支的几种方法》:本文主要介绍在Git中恢复已删除分支的几种方法,包括查找提交记录、恢复分支、推送恢复的分支等步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录1. 恢复本地删除的分支场景方法2. 恢复远程删除的分支场景方法3. 恢复未推送的本地删除分支场景方法4. 恢复

Python将大量遥感数据的值缩放指定倍数的方法(推荐)

《Python将大量遥感数据的值缩放指定倍数的方法(推荐)》本文介绍基于Python中的gdal模块,批量读取大量多波段遥感影像文件,分别对各波段数据加以数值处理,并将所得处理后数据保存为新的遥感影像... 本文介绍基于python中的gdal模块,批量读取大量多波段遥感影像文件,分别对各波段数据加以数值处

python管理工具之conda安装部署及使用详解

《python管理工具之conda安装部署及使用详解》这篇文章详细介绍了如何安装和使用conda来管理Python环境,它涵盖了从安装部署、镜像源配置到具体的conda使用方法,包括创建、激活、安装包... 目录pytpshheraerUhon管理工具:conda部署+使用一、安装部署1、 下载2、 安装3

Mysql虚拟列的使用场景

《Mysql虚拟列的使用场景》MySQL虚拟列是一种在查询时动态生成的特殊列,它不占用存储空间,可以提高查询效率和数据处理便利性,本文给大家介绍Mysql虚拟列的相关知识,感兴趣的朋友一起看看吧... 目录1. 介绍mysql虚拟列1.1 定义和作用1.2 虚拟列与普通列的区别2. MySQL虚拟列的类型2

使用MongoDB进行数据存储的操作流程

《使用MongoDB进行数据存储的操作流程》在现代应用开发中,数据存储是一个至关重要的部分,随着数据量的增大和复杂性的增加,传统的关系型数据库有时难以应对高并发和大数据量的处理需求,MongoDB作为... 目录什么是MongoDB?MongoDB的优势使用MongoDB进行数据存储1. 安装MongoDB

关于@MapperScan和@ComponentScan的使用问题

《关于@MapperScan和@ComponentScan的使用问题》文章介绍了在使用`@MapperScan`和`@ComponentScan`时可能会遇到的包扫描冲突问题,并提供了解决方法,同时,... 目录@MapperScan和@ComponentScan的使用问题报错如下原因解决办法课外拓展总结@

mysql数据库分区的使用

《mysql数据库分区的使用》MySQL分区技术通过将大表分割成多个较小片段,提高查询性能、管理效率和数据存储效率,本文就来介绍一下mysql数据库分区的使用,感兴趣的可以了解一下... 目录【一】分区的基本概念【1】物理存储与逻辑分割【2】查询性能提升【3】数据管理与维护【4】扩展性与并行处理【二】分区的

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超