浅谈如何封装iconfont的svg图标组件

• 如何自定义封装iconfont的svg图标组件
  • 步骤1：获取Iconfont图标
  • 步骤2：创建Icon组件
  • 步骤3：使用自定义Icon组件

如何自定义封装iconfont的svg图标组件

为了在uni-app中自定义封装Iconfont的SVG图标组件，您可以按照以下步骤操作：

步骤1：获取Iconfont图标

1. 访问 iconfont.cn。
2. 在我的项目中生成网络js文件
3. 新建svg.js，将代码复制到js当中
4. 在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图标。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。