如何自定义封装iconfont的svg图标组件
为了在uni-app中自定义封装Iconfont的SVG图标组件,您可以按照以下步骤操作:
步骤1:获取Iconfont图标
- 访问 iconfont.cn。
- 在我的项目中生成网络js文件
- 新建svg.js,将代码复制到js当中
- 在main.js中导入svg.js文件
import svg from './common/svg.js';
Vue.use(svg)
步骤2:创建Icon组件
在uni-app项目中创建一个新的Vue单文件组件(SFC),例如命名为 Icon.vue
。
<!-- Icon.vue -->
<template>
<view>
<svg :class="svgClass">
<use :xlink:href="iconClassName"></use>
</svg>
</view>
</template>
<script>
export default {
props: {
iconName: {
type: String,
required: true
},
className: {
type: String,
default: ''
},
size: {
type: String,
default: '16px'
}
},
data() {
return {};
},
created() {},
computed: {
iconClassName() {
return `#${props.iconName}`;
},
svgClass() {
return `svg-icon ${props.className}`;
}
},
methods: {}
};
</script>
<style lang="scss" scoped>
.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>
步骤3:使用自定义Icon组件
现在您可以在项目的任何地方使用封装好的Icon
组件来显示Iconfont的SVG图标。
<!-- 在其他.vue文件中使用Icon组件 -->
<template>
<view>
<icon iconName="caomei" /> <!-- 使用名为“caomei”的图标 -->
</view>
</template>
<script>
import Icon from '@/components/Icon.vue'; // 路径根据实际项目结构调整
export default {
components: {
Icon
}
};
</script>
通过以上步骤,您已经成功地自定义封装了一个基于Iconfont的SVG图标组件。在使用时,只需传入对应的图标名称作为icon
属性,组件就会自动查找并插入相应的SVG符号。这种方式允许您在项目中统一、便捷地管理并复用Iconfont的SVG图标。
更多详细内容,请微信搜索“前端爱好者
“, 戳我 查看 。