Icon

VUE 使用svg选图标在Iconfont-阿里巴巴矢量图标库上把需要的图标添加至项目，并下载至本地。将下载的iconfont.js文件导入至自己的项目。定义Icon组件// src/common/Icon-svg.vue<template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg></template><script>export default { name: 'icon-svg', props: { iconClass: { type: String, required: true } }, computed: { iconName() { return `#icon-${this.iconClass}` } }}</script><style>.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style>全局引入// main.js全局引入iconfont.js和自定义的IconSvg组件import "./assets/icon/iconfont.js";import IconSvg from './common/Icon-svg.vue';Vue.component('icon-svg', IconSvg);使用直接使用icon-class填iconfont上的后缀名，如图标名为icon-download，则填download <icon-svg icon-class="download" />

工具在线链接功能简介iconfont web 在线预览工具，无需安装，打开即用。可预览本地 ttf 文件中定义的所有 icon。也支持预览 阿里iconfont 中的三种模式，unicode，Font class，Symbol。根据在线字体链接即可解析预览其定义的所有icon。需求背景本工具用于解决以下问题 接手二手项目时，不清楚项目中定义了哪些 icon。 接手二手项目，有时由于交接不到位，只能找到引用的 css。但不清楚该 icon 库具体包含哪些 icon。导致二次开发时，不能很好地复用之前的 icon，若引入新icon，可能还会重复定义。导致前后 icon 风格不统一。使用外部样式库，成套的后台管理系统框架时。找到其 icon 的定义列表比较麻烦。 需要先找到对应的官网，再找到其对 icon 定义。整个过程较为繁琐。而且还不一定有介绍。故笔者开发了这个 iconfont 在线预览工具，无需安装，打开web页面即可预览 icon 库。使用教程使用本地文件点击按钮选择 ttf 后缀文件解析成功点击具体图标，可复制该 icon 代码解析在线文件（针对阿里图标库）复制在线资源链接 针对 unicode 模式，复制在线 ttf 文件链接针对 Font class 模式，复制在线 css 文件链接针对 Symbol 模式，复制在线 js 文件链接点击解析解析成功，点击具体图标，可复制该 icon 代码iconfont相关知识之前一直只知道怎么用 iconfont ，但并没有深入了解相关知识，最新学习了一下，在这里跟大家分享。 阿里图标三种模式unicode 模式 它本身和引用外部自定义字体没有区别。只是一个表现出来是图形，另一个是文字。对系统来说，没有区别。引用 iconfont 和引用自定义字体，使用的代码是一样 定义字体族 @font-face { font-family: 'iconfont'; /* 自定义字体族名，可以是任意名， */ src: url('//at.alicdn.com/t/font_1357308_kygursq6jw.eot'); /* 字体描述文件链接 */ src: url('//at.alicdn.com/t/font_1357308_kygursq6jw.eot?#iefix') format('embedded-opentype'), /* 兼容 IE9 */ url('//at.alicdn.com/t/font_1357308_kygursq6jw.woff2') format('woff2'), /* 兼容 IE6-IE8 */ url('//at.alicdn.com/t/font_1357308_kygursq6jw.woff') format('woff'), /* 兼容 chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_1357308_kygursq6jw.ttf') format('truetype'), /* 兼容 chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_1357308_kygursq6jw.svg#iconfont') format('svg'); /* 兼容 iOS 4.1及以上 */}使用字体族（无论是文本还是icon） ...

1. 前言Flutter作为时下最流行的技术之一，凭借其出色的性能以及抹平多端的差异优势，早已引起大批技术爱好者的关注，甚至一些闲鱼，美团，腾讯等大公司均已投入生产使用。虽然目前其生态还没有完全成熟，但身靠背后的Google加持，其发展速度已经足够惊人，可以预见将来对Flutter开发人员的需求也会随之增长。 无论是为了技术尝鲜还是以后可能的工作机会，都9102年了，作为一个前端开发者，似乎没有理由不去尝试它。正是带着这样的心理，笔者也开始学习Flutter，同时建了一个用于练习的仓库，后续所有代码都会托管在上面，欢迎star，一起学习。 今天要分享的内容其实非常简单，我们都知道Flutter内置了一套Material Design风格的Icon图标，但对于一个成熟的App而言，通常情况下还是远远不够的。为此，我们需要在项目中引入自定义的Icon图标。 本文就将以Ant Design图标库为例，介绍如何在Flutter中引入自定义图标。 2. 准备工作：字体文件正所谓“巧妇难为无米之炊”，要想引入自定义图标，首先我们得准备好图标字体文件（.ttf后缀）。对于大公司而言，找视觉同学切就可以了。但如果是自己做的业余项目或者没有资源的时候，我们可以上阿里巴巴矢量图标库pick自己心仪的图标。 这里就以Ant Design官方图标库为例（一共有600个图标），通过以下操作，我们将图标字体文件加入到项目中： 添加购物车 --> 点击购物车 --> 下载代码 --> 解压 --> 拷贝至项目（可重命名） 3. 声明自定义字体仅仅将字体文件复制到项目中还不够，我们需要通过声明的方式来告诉Flutter有新字体可用。打开项目根目录下的pubspec.yaml文件，找到fonts这一段： To add custom fonts to your application, add a fonts section here, in this "flutter" section. Each entry in this list should have a "family" key with the font family name, and a "fonts" key with a list giving the asset and other descriptors for the font.注释就是让我们在该段文字下方添加自定义字体的声明，结合其注释掉的例子和当前的项目目录，我们可以这样配置： ...