vue3+vite 使用icon阿里巴巴矢量图标

已于 2022-11-10 18:53:42 修改
阅读量647 收藏
点赞数
分类专栏： vue 文章标签： 前端 javascript vue.js
于 2022-09-25 21:37:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44793507/article/details/127043551
版权
下载矢量图标

在这里插入图片描述

将解压后的文件放进vue3项目的assets下

在这里插入图片描述

引入图标

在这里插入图片描述

添加公共样式(全局只添加一次)

在这里插入图片描述

在页面上使用，更改icon的图标名为对应的图标名

在这里插入图片描述

效果

在这里插入图片描述

兔子先森Ace
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架
vue3+vite+antd 后台管理系统基础模板
02-06
vue3+vite+antd后台管理系统 vue3 vite antd 后台管理系统 基础模板 vite秒启动 弃用webpack，解决启动加载过慢的问题
vue3 SVG 图标配置-阿里巴巴矢量库，封装全局组件
jieweiwujie的博客
02-16 547
在开发项目的时候经常会用到矢量图,而且我们使用 SVG 以后，页面上加载的不再是图片资源。这对页面性能来说是个很大的提升，而且我们 SVG 文件比 img 要小的很多，放在项目中几乎不占用资源。下载 SVG经常用到。
如何在vue3+vite中优雅的使用iconify图标
Amelian的博客
04-26 1899
1.在src/assets目录下新增svg/目录（这步可以按照自身习惯），我们可以按照iconify的方式，按照模块在svg/下建不同的文件夹，这些文件夹用来存放我们自定义的svg图标文件。上面是我建立的几个目录，接下来我们来配置自定义图标的加载。优点：1.配置简单，使用方便，大量的图标可供选中2.使用的svg方式，体积小缺点：1.在.vue文件中可以很舒服的使用，但是在js、ts文件例如我们定义的路由菜单栏图标，不能实现自动引入，只能使用import的方式使用，目前我也还没想到比较好的的方式。
vue3、vite引入阿里巴巴矢量图标
fymsnow的专栏
12-19 864
建议使用svg的格式，主要是它支持多色图标了，不再受单色限制。可以通过一些技巧，支持像字体那样，通过 font-size,color 来调整样式。我们也可以自己封装一个svg组件，不封装就直接使用以上的使用方式。文件里，引入方式跟unicode 格式一样。我们可以对其进行封装，组件名为。全局引入或者在使用的页面引入。
vue3+vite使用vite-plugin-svg-icons
Liberty_yes的博客
08-11 580
在开发项目的时候，经常会用到svg矢量图标，而且我们使用svg以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且我们svg文件比img要小很多，放在项目中几乎不占用资源。（vite:vue3的打包工具，相当于vue2中的webpack）文件(我自己起的名字suit.svg)，把复制的。这里以阿里巴巴矢量图标库svg图片为例。随便找一个矢量图标，点击——组件中，app.vue为例。插件显示本地svg图标。
Vue+Vite项目封装 svg 组件，使用阿里巴巴矢量图标
做笔记/记录遇到的前端bug
01-13 2020
Vite创建的Vue3.0项目，封装 svg 组件详解。svgicon 使用教程
Vue3.0及以上版本的项目添加svg图片及使用阿里矢量图片库
学如逆水行舟，不进则退，如遇问题联系邮箱：904004593@qq.com
06-21 2135
Vue3.0及以上版本的项目添加svg图片及使用阿里矢量图片库 一.安装插件 npm install svg-sprite-loader --save-dev 二:配置,在Vue.config.js加入处理 svg 的 loader //3.0版本 chainWebpack: config => { const svgRule = config.module.rule('svg') // 清除已有的所有 loader。 // 如果你不这样做，接下来的 loader 会附加
vite+vue3 icon图标组件批量封装
qq_37167086的博客
04-19 1950
之前写过一个element-plus icon组件的批量注册（element-plus/icons 批量注册，菜单路由icon图标设置_失岸的博客-CSDN博客_element菜单图标），但项目中往往还需要一些其他的图标，该方法可以在引入svg文件时通过传入icon名字即可直接渲染 1.新建icon文件夹 2.新建一个SvgIcon.vue 和一个js文件 index.vue <template> <svg :class="svgClass" ...
【Vue3】Vue3+Vite前端在组件中直接使用svg图标icon(实现设计稿的icon解决方案)
毛毛的博客
11-23 759
看到很多朋友，写的都是vue+webpack，缺少vue3+vite的图标解决方案，此处是一个简单的在vue3+vite的环境下，前端在组件中直接使用svg图标icon，实现设计稿的还原，欢迎来讨论！
在Vue3+vite+ts中引入iconfont矢量图标库
m0_67141709的博客
09-02 1668
最后总结一下，如果有兄弟按照我这个步骤写完之后不能显示，那么可能的主要问题是：你的iconfont中没有对应的图标，或者你的引入路径出错了，再或者你在使用的时候出错了，这里的封装其实就是父子传值，所以你只需要按照父子传值的那种方法正确的传值，应该就不会出错了。随着iconfont的更新，还有前端技术的发展，越来越多的人用了vue3+vite+ts了，鄙人最近正好在写一个基于这些技术搭建的项目，也是从小白一路慢慢摸索的。1：选择自己创建的项目中的symbol这里，查看一下在线链接，// 给图标添加上类名。
Vue3 怎么使用icon阿里字体图标
技术前端，忠于热爱 @0.活在风浪里
11-21 1324
Vue3怎么使用icon。
vue3+vite+ts 仿淘宝放大镜效果
09-17
1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实 有问题可以直接提问
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
Vue3+Ts+Element-plus项目，svg图标组件封装、使用（阿里图标库）。
m0_64378190的博客
03-05 823
Vue3+Ts+Element-plus项目，svg图标组件封装、使用（阿里图标库）。
vue项目中使用阿里巴巴iconfont字体图标
qq_30815659的博客
03-08 591
1.把下载下的东西解压全放在vue的某个文件夹 2.在main.js引入 import './assets/iconfont/iconfont.css' 3.在需要用图标的标签比如span标签引入你想要引入的图标名称 <span id="text" class="iconfont icon-shezhi">测时延</span> iconfont是固定的也是必须要添加的否组乱码icon-shezhi去iconfoont查询即可。 ...
vue里引用阿里的字体图标
weixin_43998604的博客
07-01 733
1.首先第一步肯定注册登陆阿里的Iconfont,这点自然不用介绍了。 2.第二步随便找个自己使用的图标添加入库，如下图： 3.第三步新增自己的一个项目，名字随便取，自己喜欢就好，然后添加到刚刚创建的项目里，然后点击确定，如图 4.第四步：点击Font class然后会发现下方约50px处让你生成链接；点击生成。如图： 5.第五步：复制上图代码然后添加到你写的**.vue项目style里即...
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 495
记录一次前端页面崩溃的产生及处理
将nodejs+express+vue3+vite发布到阿里云上
07-17
要将Node.js + Express + Vue3 + Vite应用程序部署到阿里云上，您可以按照以下步骤进行操作： 1. 在阿里云上创建一个ECS实例，选择适合您需求的操作系统和配置。确保您在安全组中打开了HTTP（80端口）和HTTPS（443端口）的访问权限。 2. 在本地开发环境中构建Vue3应用程序。在项目根目录下打开终端或命令提示符，运行以下命令： ```bash npm run build ``` 这将使用Vite构建工具编译和打包Vue3应用程序，并将生成的静态文件保存在`dist`目录中。 3. 将Vue3应用程序的静态文件上传到阿里云ECS实例。您可以使用FTP工具（如FileZilla）将`dist`目录中的文件上传到ECS实例的`/var/www/html`目录（或您自定义的web目录）。 4. 在ECS实例上安装Node.js和npm。您可以通过SSH远程连接到ECS实例并使用以下命令安装它们： ```bash # 安装Node.js curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - sudo apt-get install -y nodejs # 安装npm sudo apt-get install -y npm ``` 5. 在ECS实例上创建一个名为`server.js`的文件，并添加以下内容： ```javascript const express = require('express'); const path = require('path'); const app = express(); // 静态文件托管 app.use(express.static(path.join(__dirname, 'html'))); // 所有路由重定向到index.html app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'html', 'index.html')); }); // 启动服务器 const port = process.env.PORT || 80; app.listen(port, () => { console.log(`Server is running on port ${port}`); }); ``` 在上述示例中，我们使用Express创建了一个简单的服务器。我们通过`express.static`中间件来托管上传的Vue3应用程序的静态文件，然后将所有路由重定向到`index.html`以支持Vue的单页应用。最后，我们使用`app.listen`方法来启动服务器，并指定端口号为80。 6. 在ECS实例上运行以下命令来安装Express和其他项目依赖： ```bash npm install express ``` 7. 在ECS实例上运行以下命令启动Express服务器： ```bash node server.js ``` 这将在ECS实例上启动Express服务器，并监听端口80。 8. 现在，您的Node.js + Express + Vue3 + Vite应用程序已经在阿里云ECS实例上运行起来了。您可以在浏览器中访问ECS实例的公网IP地址来查看应用程序。 请注意，上述示例仅提供了一个简单的部署流程，并且假设您已经完成了阿里云ECS实例的设置和配置。在实际部署过程中，您可能还需要考虑安全性、性能优化、域名绑定等方面的问题。另外，您可能还需要使用Nginx等工具来配置反向代理或实现负载均衡等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值