网站可信图标,网站美工设计基础,论论坛坛网网站站建建设设,设计师证书目录 一、需求描述二、操作步骤1.在iconfont中选择项目需要使用的图标2.在项目中创建iconfont.js3.创建svgIcon组件 一、需求描述
将iconfont图标库选择的图标以SVG的形式引入项目并通过组件化的形式在项目中引用可控制图标的大小和颜色
二、操作步骤
1.在iconfont中选择项目… 目录 一、需求描述二、操作步骤1.在iconfont中选择项目需要使用的图标2.在项目中创建iconfont.js3.创建svgIcon组件 一、需求描述
将iconfont图标库选择的图标以SVG的形式引入项目并通过组件化的形式在项目中引用可控制图标的大小和颜色
二、操作步骤
1.在iconfont中选择项目需要使用的图标 复制图片中的代码全部复制
2.在项目中创建iconfont.js
在项目中创建iconfont.js并将复制的代码粘贴
3.创建svgIcon组件
templatesvg :classsvgClass aria-hiddentrueuse :xlink:hreficonClassName :fillcolor //svg
/templatescript 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
});
/scriptstyle scoped langless
.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 template 部分 svg :classsvgClass aria-hiddentrue定义了一个 svg 元素通过 :class 动态绑定了类名根据 svgClass 变量的值添加类名。use :xlink:hreficonClassName :fillcolor /使用 use 元素来嵌套引用SVG图标xlink:href 属性使用了动态绑定根据 iconClassName 变量的值设置图标的引用路径而 fill 属性则根据 color 变量的值设置图标的颜色。 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 类名。 style scoped langless 部分 .svg-icon定义了SVG图标的基本样式包括宽度、高度、相对定位、填充颜色等。v-bind(props.size) 使用了Vue 3的新特性将 props.size 动态绑定到CSS中实现图标大小的动态设置。vertical-align: -2px;用于微调图标的垂直对齐使得图标在垂直方向上更加居中。
这个组件允许用户通过传递不同的 iconName、className、color 和 size 属性来渲染不同的SVG图标并且具有一些默认值。同时通过使用Vue 3的新特性使得组件更加灵活和易于使用。
