前面文章有讲到 svg 图标按需加载的优势以及 Vue 如何使用 vue-svg-icon 实现 svg 图标按需载入: https://www.cnblogs.com/Leophen/p/13201907.html 今天来学习一下使用 svg-sprite-loader 在 Vue3 项目中实现图标按需加载 1.将 email.svg 文件导入项目 <svg width="24" height="24" viewBox="0 0 24 24&quo

自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http://www.iconfont.cn/:2.制作svg格式的图标,并上传至阿里图标库iconfont. 具体操作: step1:  从阿里iconfont下载图标本地包 step2: 从本地文件里摘出iconfont.css,iconfont.ttf, iconfont.js三个文件,放入到自己的项目

vue3+TS 自定义指令:长按触发绑定的函数 而然间看到一个在vue2中写的长按触发事件的自定义指定,想着能不能把他copy到我的vue3项目中呢. 编写自定义指令时遇到的几个难点 1.自定义指令的类型 在ts中写任何东西都要考虑到类型的问题,自定义指令的类型问题依然存在 2.在ts中使用setTimeout() 函数 setTimeout()函数的默认返回值是一个随机的number ,这个number 代表了这个计时器的唯一id,但是并不能直接将其类型定义为number 否则会出现报错. 3

在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风格 -- 通过 el-icon-xxx 的方式使用图标(如果有问题的朋友可以先阅读前面的文章:基于 Vite 创建 vue3 全家桶项目). 在真实的企业级开发中,Element Plus 内置的图标通常很难满足业务需求,项目中需要引入大量的 SVG 图标资源,本文描述如何在 Vue3 + Vite2 环境中

阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <

项目简介 vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案,是 有来技术团队 继 youlai-mall 全栈开源商城项目的又一开源力作. 项目使用 Vue3 + Vite2 + TypeScript + Element-Plus + Vue Router + Pinia + Volar 等前端主流技术栈,基于此项目模板完成有来商城管理前端的 Vue3 版本. 本篇先对本项目功能.技术栈进

响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icons>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文,需注明英文出处:http://webstandardssherpa.com/reviews/responsive-webfont-icons,以及作者相关信息 ——作者:Jason ——译者:大漠 响应式

在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失真,也大大减少了请求数量,解决了图片占用资源的问题,非常好用. IcoMoon 的使用: 1. 直接使用提供的图标 在网址:https://icomoon.io/app/#/select 选择相应图标,然后点击右下角 Generate Font 进行设置,完了点击下载,将下载文件解压,然后将 fon

以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而是字体,至于为什么使用字体图标而不是图片,相信web开发者多少都有所了解,简单列举几条: 多个图标字体合成一个字体文件,避免每张图片都需要联网请求: 字体可任意缩放,而图片放大会失真.缩小则浪费像素: 可通过css任意改变颜色.设置阴影及透明效果: 在实际项目中,开发者难免会需要自定义图标,此时该如

在传统桌面程序中,对图标的使用大多是直接嵌入JPG或者PNG的图片.在祖传的1366x768分辨率下,并没有什么问题.相对于手机硬件的突飞猛进,也侧面反映了PC行业的落寞和桌面程序开发的不思进取.用360卫士的群众并不能倒推PC行业的升级.反倒是水果公司双高的利润和口碑让人很是眼馋.加之某软跳出来教猪队友做硬件.现在倒是有些起色,1080p的屏幕已是标配,4k也算常见.那么传统桌面程序在升级过程中,就会遇到今天要讨论的,如何解决高分辨率下图标模糊的问题. 一种解决方案是按最高的分辨率提供图片.这

svg的图片有着颜色自定义大小自定义的优势.在阿里图标库可以下载svg图片. 那么在vue框架中我们该怎么使用svg图片呢 这个时候就用到了 webpack 插件 svg-sprite-loader 首先呢自然就是安装了 npm i svg-sprite-loader --save 创建svg文件目录/src/icons/svg 里面呢放置所有svg文件 还有/src/icons/index.js //index.js import Vue from 'vue' import SvgIcon f

1. Vue-awesome 也许大家知道 Font-awesome 之类比较流行的图标库,就像各大组件库都有各自版本一样,它也有Vue的版本 Github地址:https://github.com/Justineo/vue-awesome 里面包括数千个高质量,可自定义的图标,Vue-awesome将Font Awesome带入到Vue中,使开发者可以通过单个组件访问所有的免费图标. 2. Vue Unicons Github地址: https://github.com/antonreshet

一.前言 hexo 的 Bluelake 主题是我一直在用的,简单大方,很喜欢.但最近有了添加自定义 icon 图标的需求,比如,添加 "地址"."扫一扫"."优惠券" 等 icon,还是很有必要研究一下如何制作的. 然后我就去了主题作者 chaooo 的 github 上留言,咨询其方法,作者回复的很快,按照作者的回复,成功将自定义图标制作出来了,也分享给有需要的人. 二.阿里妈妈图标库 官网地址:www.iconfont.cn/ icon 图

嗨,我是 Martin,也叫老王,今天推荐一款好用的开源图标库. 我们平常找图标往往会去 iconfont 但是今天,我们看了 Martin 的文章之后,就会有一个新的选择--CSS.GG Github https://github.com/astrit/css.gg star 5751 fork 214 Watch 86 项目介绍 700 + 纯 CSS, SVG & Figma UI Icons 可用在 SVG 精灵图, styled-components, NPM & API 使用方

基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0开发的多功能PC网页端自定义弹窗组件.拥有超过10+种弹窗类型.30+种参数配置,支持拖拽(自定义拖拽区域).缩放.最大化.全屏及自定义置顶层叠等功能. v3layer的开发灵感同样来自之前v2版本,在功能效果上和之前的保持同步一致性. ◆ 引入组件 // 在main.js中全局引入组件 impor

该系列已更新文章: 分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率 开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境 Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构 Vue3

该系列已更新文章: 分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率 开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境 Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构 Vue3

Font Awesome 是一个非常方便的图标库.这些图标都是矢量图形,被保存在 .svg 的文件格式中.这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小. 你可以将 Font Awesome 图标库增添至任何一个应用中,方法很简单,只需要在你的 HTML 头部增加下列代码即可: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0

最近在研究icon font图标字库,觉得很有意思,于是找了一些比较好的在线字库.大都是开源的,而且各有特色,推荐给大家! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库. fontello http://fontello.com/ 在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的. icomoon http://ico

继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库),还支持自己上传,关键还能生成你项目专用的CDN,速度不言而喻,支持国产.下面引用介绍 转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具) 使用SVG来代替Web Iconfont(图形字体化) 从最开