⼿把⼿教你在vue中使⽤icon图标，附demo代码
icon图标的使⽤
START
icon图标的使⽤，对于番茄我来说，算是⼀个痛点吧。写这篇⽂章之前，也看了不少别⼈有关图标使⽤的博客。想了很久，还是想⾃⼰写⼀篇属于番茄我⾃⼰的⼀篇图标相关的博客。⼀来是复习，⼀来算是总结。这次必不会鸽了，⼀⽓呵成，⼀次到位.
⽂章的主体顺序，还是按照我接触的先后做排序的，由易到难，这样⽅便理解。当然，番茄我了解的知识，或许也不够全⾯，请见谅.
出于⽐较有责任的想法，我会写⽐较多的demo，展⽰具体⽤法，确保百分百可以运⾏，⽅便学习或CV.
为了⽅便整合，所有演⽰demo我都会写在⼀个vue项⽬中。
演⽰代码
初次接触
最开始学习html的时候，往往都是⽼师布置作业，下课前会给我们发放课后作业需要⽤到的图⽚或图标，所以第⼀个就讲讲最基本图标的使⽤吧，直接本地引⽤图⽚/图标⽂件。
先上代码
<template>
<div class="first">
<h2>1.初次接触：直接引⼊本地图⽚</h2>
<div>
<h4>1.1 引⼊本地图⽚</h4>
<img src="@/assets/images/jacket.png" alt="上⾐" />
<!-- 下⾯这种⽤法也可以    `@` 就等于 `/src` -->
<!-- <img src="../../../../assets/images/jacket.png" alt="上⾐" /> -->
<h4>1.2 引⼊在线链接</h4>
<img
src="upload.jianshu.io/users/upload_avatars/13278218/60803b63-0f9d-490e-9c41-1511c56025d4?imageMogr2/auto-orient/strip|imageView2/ 1/w/240/h/240"
alt="上⾐"
/>
<h4>1.3 require形式使⽤</h4>
<img :src="imageShorts" alt="短裤" />
<h4>1.4 import形式使⽤</h4>
<img :src="socks" alt="袜⼦" />
<h4>1.5 for循环遍历使⽤</h4>
<div v-for="item in imagesList" :key="item.url">
<img :src="item.url" alt="" />
</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import socks from "@/assets/images/socks.png";
export default {
data() {
return {
imageShorts: require("@/assets/images/shorts.png"),
socks: socks,
imagesList: [
{ url: "@/assets/images/jacket.png" },
{ url: "../../../../assets/images/socks.png" },
{ url: "../../../../assets/images/socks.png" },
{
url:
"upload.jianshu.io/users/upload_avatars/13278218/60803b63-0f9d-490e-9c41-1511c56025d4?imageMogr2/auto-orient/strip|imageView2/1/ w/240/h/240",
},
{ url: require("@/assets/images/shorts.png") },
{ url: socks },
],
};
},
};
</script>
<style scoped>
.first {
color: #fff;
min-height: 100%;
height: auto;
text-align: center;
}
h4 {
padding: 60px 0 10px;
border-bottom: 1px solid #21262d;
}
img {
width: 100px;
height: 100px;
}
</style>
运⾏效果
说明
可以看到运⾏的效果图中，使⽤v-for循环展⽰图⽚。使⽤本地图⽚路径，就会加载不出来。具体原因是因为 vue2是基于webpack进⾏打包运⾏的，⽽webpack会解析它为模块依赖 ，⽂件路径就会出错 ，所以本地图⽚在进⾏使⽤的时候，推荐使⽤require和import⽅式使⽤。
CSS Sprite
CSS Sprite中⽂可以叫它，精灵图/雪碧图，两种称呼都可以，番茄个⼈⽐较习惯叫它精灵图。
那什么是CSS Sprite?
先上两个有代表性的精灵图，认识⼀下。
为什么⽤精灵图？
⾸先，我们先来了解⼀下，页⾯在接受图⽚的过程。
每张图⽚的显⽰是先由浏览器发送请求，然后服务器接受请求，返回请求内容。如果⼀个页⾯有上百张图⽚，哪怕是很⼩的图标，都需要经历⼀次这样的过程。那么，⽏庸置疑，肯定会由于请求数量的增加让整个页⾯的加载速度降低。
正应为如此，精灵图（sprite）应运⽽⽣，图⽚整合技术，将⼤量的⼩图标整合到⼀张图，从⽽减少服务器接收和发送请求的次数，提⾼页⾯的加载速度。
怎么使⽤精灵图呢？
先上代码
<template>
<div class="second">
<h2>2.CSS-Sprite如何使⽤</h2>
<h4>2.1 通过css的background-position属性，对包含很多⼩图⽚的Sprite图⽚进⾏展⽰</h4>
<div class="second-icon">
<div
:
class="icon icon-one"
></div>
<div
:
class="icon icon-two"
></div>
<div
:
class="icon icon-three"
></div>
<div
:
class="icon icon-four"
></div>
</div>
<div>
<h4>2.2 通过css的background-position属性，配合动画添加动态的⼩⼈(好像有些像素的⼩游戏，主⾓的移动就是⽤这个做的，不过哪个是⽤监听按键事件
，切换不同的精灵图实现的)</h4>
<div
:
class="snowman"
></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
icon: require("@/assets/images/iconSprite.png"),
snowman: require("@/assets/images/snowmanSprite.jpg"),    };
},
};
</script>
<style scoped>
.second {
color: #fff;
min-height: 100%;
height: auto;
text-align: center;
}
h4 {
padding: 60px 0 10px;
border-bottom: 1px solid #21262d;
}
.
second-icon {
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
width: 40px;
height: 40px;
/* 是否重复 no-repeat 不重复 */
background-repeat: no-repeat;
}
.
icon-one {
/* 背景定位，可以通过百分⽐去设置 */
background-position: 5% 4%;
}
.icon-two {
/* 背景定位，可以通过px去设置 */
background-position: -22px -78px;
}
.icon-three {
/* 背景定位，可以通过top right center left bottom去设置 */
background-position: center -139px;
}
.icon-four {
/* 当然也可以组合使⽤ */
background-position: 20% -205px;
}
/* 配合css动画可以实现动态的⼩⼈ */
.snowman {
margin: 0 auto;
width: 122px;
height: 180px;
animation: walk 1s steps(4) infinite;
}
@keyframes walk {
0% {
svg图background-position: 0;
}
100% {
background-position: -486px;
}
}
</style>
运⾏效果
iconfont
后来随着学习的深⼊，项⽬越做越⼤，对图标的需求就多了起来，到这⾥不得不说⼀下，iconfont
iconfont 是阿⾥提供的⼀个开源图库
官⽅⽹址：www.iconfont
顾名思义，字体图标， iconfont提供多种格式的icon，平台也可将图标转换为字体，便于前端⼯程师⾃由调整与调⽤。
先看看官⽅的帮助⽂档
1.icon单个使⽤
直接登录账号，搜索⾃⼰想要使⽤的图标。点击下载，本地直接引⽤即可。
此种⽅式适合⽤在图标引⽤特别少，以后也不需要特别维护的场景。
不过如果是成体系的应⽤使⽤，建议⽤户把icon加⼊项⽬，然后使⽤下⾯三种推荐的⽅式。
2.unicode引⽤
unicode是字体在⽹页端最原始的应⽤⽅式，特点是：
兼容性最好，⽀持ie6+，及所有现代浏览器。
⽀持按字体的⽅式去动态调整图标⼤⼩，颜⾊等等。
但是因为是字体，所以不⽀持多⾊。只能使⽤平台⾥单⾊的图标，就算项⽬⾥有多⾊图标也会⾃动去⾊。
注意：新版iconfont⽀持多⾊图标，这些多⾊图标在unicode模式下将不能使⽤，如果有需求建议使⽤symbol的引⽤⽅式unicode使⽤步骤如下：
第⼀步：拷贝项⽬下⾯⽣成的font-face

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。