前言

icon图标的使用来源个人目前只知道雪碧图，实体字符和SVG。

雪碧图虽然能节约请求的资源，但缺少可变化性（例如缩放模糊，颜色固定等），而且开发人员每次都需要通过定位获取相应的icon，极不方便。

实体字符（iconfont）格式是SVG，使用方法和字体一样，但是只能是单色的。

最好的SVG图标，没啥缺点，现在有些第三方组件库都迁移到SVG。

个人之前使用过国外的iconmoon，觉得不好用，不推荐使用，所以使用方法放到最后记录。

推荐使用阿里的iconfont，图标多，下载方便，还能转成SVG。

iconfont

选择好图片后，点击下载代码，解压后是个项目，可以点击里面的html文件，查看用法，个人喜欢选择symbol。

然后除了官方给的用法，有三种使用方式。

第一种

在线引入地址到前端工程中，如果公司有ui提供，也可以上传到iconfont上。这个方案的缺点就是如果在线修改图标，地址也要重新生成。

先main.js中注册

const IconFont = Icon.createFromIconfontCN({scriptUrl: "//at.alicdn.com/t/font_1154049_w87h4oeytph.js" // 在 iconfont.cn 上生成
});Vue.component("IconFont", IconFont);

在html中直接这样使用，type里是这个图标的名字。

<IconFont type="icon-icon-404" style="font-size: 100px" />

第二种

本地文件引入，这种方式cli会自动生成一个url地址，缺点就是不方便。

<img :src="Logo" alt="">import Logo from "@/assets/logo.svg";
export default {components: {Logo}
};

第三种

修改cli的webpack的loader图标配置，把图标改写成函数式组件，具体配置在cli官网可找。

在vue.config.js中

chainWebpack: config => {const svgRule = config.module.rule("svg");// 清除已有的所有 loader。// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。svgRule.uses.clear();// 添加要替换的 loadersvgRule.use("vue-svg-loader").loader("vue-svg-loader");
}

把loader规则用npm下载vue-svg-loader，然后这样使用

<Logo />import Logo from "@/assets/logo.svg";
export default {components: {Logo}
};

如果想看这个工程里所有loader规则有哪些，就在终端中输入:

Vue inspect > output.js

然后就会生成一个output.js配置文件

iconmoon

具体怎么使用这个网站不记录了，自定义后打包下载，打开文件

将这个selection.json文件上传至网站即可知道用了什么图标；

然后把整个文件放入vue工程中的src/assets里面

使用

又水了一篇~

【工程化】icon图标的获取与使用相关推荐

安卓APK文件的icon图标文件获取 xml格式
正常情况下或者安卓8之前, aapt dump badging weixin/weixin809android1940_arm64.apk | grep -E 'application-icon| ...
浏览器页签icon图标的设置和获取
ReadMe 前言浏览器icon图标设置浏览器icon图标获取前言今天上午小明(网络上突然放大招并且给大家带来不少笑点的那个小明)发来信息求助,具体的需求是小明正在搞一个网站的维护时需要新 ...
C# 获取Windows系统ICON图标的四种方式-可提取各种文件夹、文件等等图标
本文介绍的是提取Windows系统内部Icon图标的方法,就是系统资源管理器里面显示的图标,包括文件夹.文件,如:常规文件夹的图标.特定文件夹图标(磁盘根目录.收藏夹.网络共享目录等).各文件类型图标 ...
获取网站的浏览器上的icon图标
获取网站的浏览器上的icon图标 http://www.im286.com/favicon.ico 把前面的域名换成你要获取的网站
如何获取和制作免费的icon图标素材
icon 图标在界面设计中虽然占比不大,但却是不可缺少的设计元素之一.设计师通过 icon 图标,将抽象的概念通俗化,降低用户理解某个操作的难度.而设计师也会通过改变 icon 图标的样式来展现整体界 ...
Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标
1. 在src文件下,创建components/SvgIcon/index.vue组件 <template><divv-if="isExternal":style ...
Vue3 使用vant actionBar组件后对icon图标的点击切换效果/点击收藏/取消收藏
制作收藏的点击收藏.取消收藏的图标切换效果效果: vue: <template><van-action-bar><van-action-bar-icon icon=&q ...
bootstrap4.0图标使用_很不错的两款Bootstrap Icon图标选择组件
一.Bootstrap icon picker组件这个组件是在github上面搜索的时候找到的,初初看上去,确实是很不错的,并且是基于bootstrap风格的,所以更加适合使用bootstrap风格 ...
elementui icon图标大全
前言 Element内置丰富的图标库,美中不足的是不能适应全部场景.不过我们可以借助第三库来扩展,阿里的icon库就很方便,内部有丰富的图标共选择. Element 内置图标库 Element内置丰富 ...

【工程化】icon图标的获取与使用

文章目录

前言

iconfont

iconmoon

【工程化】icon图标的获取与使用相关推荐

最新文章

热门文章