Complete steps for vue dynamic binding icons

0 Differences between icons and images

Icons are characters, and pictures are binary streams. That is, images load slower than icons, and it is best not to use the img tag to load icons. We can import icons as components using the import method, and then import them as tags.

1 Install svg

1. Run the cmd window as an administrator and switch to the project directory to execute.

npm add svg

2 Download icons from the icon library

1. Alibaba Icon Library

https://www.iconfont.cn/

2. Download svg

3. Create an icons directory under the compone directory, and create an svg directory under icons to store icons specifically.

3 Check how to use the plugin

• All vue plugins are in node_modules
• Find the README of the plugin e-cli-plugin-svg according to the plugin name when downloading

4 Display Icons

1 Define the dynamic component MyIcon.vue

1. Myicon is a property passed from the parent component

2.computed is used to dynamically generate the icon address based on myicon.name (the name of the icon). The reason is that when we import components outside of export default{}, the props attributes we receive cannot be passed outside of export default{}, so computed is used to help generate the icon component.

3.:style is a dynamically bound style, where width and height are bound. And set the default value in props. If the parent component does not pass width and height information, the default value is used.

4.:fill is bound to the fill attribute style, and the default value is also set in props.

<template>
	<div>
		<component
			:is="icon"
			:style="{width : myicon.width , height : myicon.hight}"
			:fill="myicon.fill"
		></component>
		
	</div>
</template>

<script>
	
	export default{
		props:{
			myicon:{
				name:{
					type:String
				},
				
				width:{
					type:String,
					default:'40px'
				},
				hight:{
					type:String,
					default:'40px'
				},
				fill:{
					type:String,
					default:'#000000'
				}
			}
			
			

		},
			
		computed:{
			icon(){
				return () => import('@/components/icons/svg/' + this.myicon.name + '.svg?inline')
			}
			
		}			
	}
</script>

<style>	

</style>

2 Globally import and define the component MyIcon.vue in main.js

import mysvg from '@/components/MyIcon.vue'
Vue.component('my-icon',mysvg)

3 Call my-icon as the parent component

1. Define the properties to be passed in myicon:{}, where name is a required field, which is the name of the icon without the suffix.

<template>
	
					<my-icon
						:name = "scope.row.icon"
						:width = "50px"
						:height = "50px"
						:fill = "#ff00ff">
					</my-icon>
					
</template>

<script>
	
	
	
	export default {

		data() {				
			return {		
				
				myicon:{					
					name: "position",
					width: "60px",
					height: "60px",
					fill : "#ff00ff"					
				},

				

			}
		},
	}
</script>

<style scoped lang="less">	
</style>

Summarize

This is the end of this article about vue dynamic binding icons. For more relevant vue dynamic binding icon content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!