个性化阅读
专注于IT技术分析

vue开发微信小程序图标如何引入的问题——已解决

现在很多人或者企业都喜欢开发微信小程序,因为不用下载啊,可以像软件那样使用,可是我发现,我只会使用框架中的图标,看到很多好看的图标网站比如阿里图标库的图标,却不会用,怎么办呢?今晚就来解决这个问题:使用vue.js开发微信小程序添加其他库图标。

一、使用框架库的图标

一般vue.js框架都会有图标,比如像uni-app框架和element框架都自带图标库。使用方式是引入框架。然后再加入图标的class就可以了。下面例子是使用uni-app框架加入图标的方式,首先要下载图标文件到项目中,然后引入。

例如:

<uni-icon class="search-icon" type="search" size="30"></uni-icon>
import uniIcon from "@/components/uni-icon/uni-icon.vue"
element图标

二、像图片那样加入图标

这种事比较蠢的方法,当然如果图标够少的话也没有问题。说明白是像图片那样加入图标了,那肯定是不能再使用css修改图片的颜色的了。像导航类图标。事先要像图片加到到项目的【static】文件的目录下。然后还要引入到项目中。

例如:

<!-- menu html -->       
 <uni-grid :options="menu" column-num="5" 	show-border="false">
</uni-grid>
<script>
import img1 from "@/static/img-01.jpg"
import img2 from "@/static/img-02.jpg"
import img3 from "@/static/img-03.jpg"
import img4 from "@/static/img-04.jpg"
import img5 from "@/static/img-05.jpg"

export default {
        components: {uniIcon,uniGrid},
        data() {
            return {
                menu:[
                    {image:img1,text:'圣诞树'},
                    {image:img2,text:'铃铛'},
                    {image:img3,text:'圣诞老人'},
                    {image:img4,text:'礼物'},
                    {image:img5,text:'帽子'}
                    ],
                    indicatorDots: true,
                    autoplay: true,
                    interval: 2000,
                    duration: 500,
            }
}
}
</script>
引入图片图标

三、引用图标网站的图标

1、下载

引用图标网站的图标,比如我们都使用阿里图标库,上面那么多图标,想用哪个就用哪个,不用像框架图标那样,同化率太大了。首先要将图标文件下载下来解压放到【static】目录下。

例如:

iconfont阿里图标库

2、引用

放入到项目的文件要引入到页面中,我们一般都在全局文件中引用(main.js),这样所有文件都可以使用了,免得要使用的时候再次引入。在html文件中使用图标只需要写该图标的的class或者Unicode都是可以了。

例如:

//html
<view class="icon-buoumaotubiao16 iconfont" style="color: red;"></view>
//js
<script>
import "@/static/style/iconfont.css"
</script>
赞(0) 打赏
未经允许不得转载:srcmini » vue开发微信小程序图标如何引入的问题——已解决
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏