第六章 样式及图标（三）——整合 unplugin-icons

已于 2024-08-11 21:39:50 修改
阅读量47 收藏
点赞数
分类专栏： Vue3项目实战保姆级教程-后台按钮级权限管理系统 文章标签： vue.js
于 2024-08-11 21:36:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdbest/article/details/141112408
版权

6.3 整合unplugin-icons

unplugin-icons 官网

提示：本案不采用，后面有更优雅的方式。

6.3.1 按需自动导入图标

  1. 安装插件

    npm i -D unplugin-icons

  2. 安装图标集

    • 安装所有图标集（选择该方案）

      npm i -D @iconify/json

      当前 package.json 文件：

      <
了解本专栏 订阅专栏 解锁全文 超级会员免费看
yu玉米mi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
vue3 vite 介绍三个常用插件
hhbbeijing的专栏
07-20 986
1.unplugin-auto-import：按需自动导入 Vite、Webpack、Rspack、Rollup 和 esbuild 的 API。简单点说，无需每个 vue 文件要手动导入 vue 相关函数：ref、reactive、computed 等等，就可使用。一、unplugin-auto-import、unplugin-vue-components。unplugin-icons 插件可以做到自定义图标和组件库中图标使用一致。2.unplugin-vue-components：Vue 的按需组件。
如何在vue3+vite中优雅的使用iconify图标
Amelian的博客
04-26 5796
1.在src/assets目录下新增svg/目录（这步可以按照自身习惯），我们可以按照iconify的方式，按照模块在svg/下建不同的文件夹，这些文件夹用来存放我们自定义的svg图标文件。上面是我建立的几个目录，接下来我们来配置自定义图标的加载。优点：1.配置简单，使用方便，大量的图标可供选中2.使用的svg方式，体积小缺点：1.在.vue文件中可以很舒服的使用，但是在js、ts文件例如我们定义的路由菜单栏图标，不能实现自动引入，只能使用import的方式使用，目前我也还没想到比较好的的方式。
icon解决方案(iconify)，基于unplugin-icons封装通用icon组件
m0_74382023的博客
05-20 2076
对于icon，前端的第一反应就是采用iconfont来做，对于多数场景当然是没有问题的，甚至后续项目中出现自定义icon只需要ui将设计传到iconfont平台就行了，但是毕竟还是经过了第三方平台的，所以我采用了iconify方案。
vue3 vite 使用 unplugin-icon 数据动态渲染图标
guoqing的博客
02-24 4770
vue3 vite 使用 unplugin-icon 数据动态渲染图标 当遇到路由图标那种需要根据数据渲染出图标，就不行了，这里的解决方法是封装图标渲染的组件。本地的图标好像有点问题，还在研究为啥动态渲染不了，后面发现问题了再改。或者有没有大佬看看，是啥原因导致本地svg动态导入不进去。图标库的时候遇到的图标动态渲染问题，这里记录一下。其实就是个全局常量 代表图标的前缀而已。然后到渲染的地方呢 读取出你绑定的字段。常量这块 直接写死都一样的。使用的时候直接导出封装的。
unplugin-icons 使用教程
最新发布
gitblog_00642的博客
08-13 869
unplugin-icons 使用教程 unplugin-icons???? Access thousands of icons as components on-demand universally.项目地址:https://gitcode.com/gh_mirrors/un/unplugin-icons 项目介绍 unplugin-icons 是一个开源项目，它允许开发者在使用 React、Vue...
Vue3 ElementPlus 更加优雅的使用Icon
热门推荐
CRMEB小程序商城的博客
03-03 1万+
前言 这可能是目前最便捷、最合适的 Icon 使用方式了，特别是在 Vue3 中，等等，你以为它只是适用于 Vue3？不，不要被标题欺骗，它支持 Vue2/Vue3、React、Preact、Solid、Svelte 等多种主流框架，同样，它也支持 Vite、Roullp、Webpack、Nuxt、VueCLI、Svelte Kit、Svelte + Vite、Next.js 等多种主流构建工具。之所以标题中带有 Vue3 以及 ElementPlus 单纯是因为此文是以此背景下产生的，示例代码也是基于此。
自动导入并解析Icon【插件使用、Vue3、Vue-cli】
qq_22841387的博客
05-15 3678
在 Vue 项目中，我们经常需要使用图标（Icons）来美化界面，提升用户体验。虽然NaiveUI提供了n-icon组件来展示图标，但在实际使用过程中，频繁导入和嵌套图标组件的方式显得过于繁琐，也不够灵活。因此，为了更方便、更灵活地使用图标，我们可以引入和两个插件，使得我们可以直接在 Vue 组件中使用图标，并自动解析图标名称。
理解按需自动导入 unplugin-auto-import & unplugin-vue-components
阿城的博客
12-21 5330
如果是自己开发的组件库，为了让它支持自动按需导入，就需要自己编写解析器。},],})resolvers 数组里可以传入一个函数，这个函数会在编译时不断执行。函数接收组件名，并返回一个和 unplugin-auto-import 插件中 imports 配置一样的配置对象，这个对象就是 import 语句的描述对象，最终依据它生成导入语句。注意：组件名会自动转成大驼峰写法。因此所谓的解析器，功能就是根据组件名映射成 import 导入语句。
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
在Vite中将数千个图标作为Vue组件进行访问-Vue.js开发
05-27
在Vite vite-plugin-icons中作为Vue组件访问成千上万个图标在由Iconify浏览器支持的Vite 90+图标集中，作为Vue组件访问成千上万个图标安装Install npm i -D vite-plugin-icons将其添加到vite.config。 js // vite.config.js从“ vite-plugin-icons”导入图标导出默认{插件：[Icons（）]，}
simple-line-icons：简单和最小线条图标
02-05
简单线图标 具有CSS，SASS，LESS和Web字体文件的简单线条图标。 预览和文件 您可以在找到完整图标集的备忘单 安装 通过 npm install simple-line-icons --save 通过 bower install simple-line-icons --save ...
vue3 + vite 项目搭建 - 配置图标库
qq_40026668的博客
11-30 4188
安装依赖 yarn add unplugin-icons unplugin-vue-components --dev 或者 npm i -D unplugin-icons unplugin-vue-components 配置vite.config.ts (自定义图标) import UnpluginVueComponents from 'unplugin-vue-components/vite' import Icons from 'unplugin-icons/vite' import IconsRes
vue3 自动下载使用 iconify图标以及自定义svg图标
xw245184020的专栏
10-11 1595
自定义图标只要下载svg 文件到 assets/icons 文件夹下，自定义图标 通过icon-图标名称访问，iconify图标通过i-图标来源-图标名称访问 i-ep-edit i-ant-design-user。开发中经常使用图标，通过unplugin-icons 插件我们可以在项目中自动下载所需的图标，但实际开发中我们还需要iconfont以及项目ui切图中的图标，这就需要使用自定义SvgIcon组件。vite.config.ts配置。unocss.config.ts配置。
uni-app 为组件 uni-icons 制作可拓展的自定义图标库（超实用）
前端看世界
05-18 2313
网上的教程大部分是说 通过在线ttf编辑器，打开 uni.ttf ， 上传自己的 svg 图标，下载字体文件， 转换 base64， 最后修改项目文件； 如何创建一个私有的字体图标库， 像使用 iconfont 一样方便呢？ 下载 uni-icons 的 svg 格式图标 通过在线 ttf 编辑器，打开 uni.ttf文件， 下载 svg 图片，（一定要核对图片名称有的不一样） http://fontstore.baidu.com/static/editor/index.html （好像是打不开了）.
vue3.0 使用element-plus 按需自动导入
txw0415的博客
12-30 2527
一、element-plus 安装 npm install element-plus --save // 按需自动导入 npm install -D unplugin-vue-components unplugin-auto-import 二、vue.config.js 配置 const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/web
icons
平安喜乐
03-14 608
在使用element-plus组件库开发后台管理系统时图标不够用。
vue3+vite+ts 图标封装3种方案
qq_20663639的博客
08-29 4149
Vue3+Vite图标封装3种方案
unplugin-icons封装icon组件
05-25
unplugin-icons 是一个用于管理和导入 SVG 图标的 Vue.js 插件。借助 unplugin-icons，您可以轻松地将 SVG 图标导入到您的 Vue.js 项目中，并将其作为组件使用。 要使用 unplugin-icons，您需要安装并配置它。您可以使用 npm 或 yarn 安装 unplugin-icons，然后将其添加到您的 Vue.js 项目中。您需要在 Vue.js 项目中创建一个 icons.js 文件，并在其中导入您想要使用的 SVG 图标。最后，您可以在您的 Vue.js 组件中使用这些 SVG 图标作为组件。 以下是一个简单的示例： 1. 安装 unplugin-icons： ```bash npm install unplugin-icons ``` 2. 在 Vue.js 项目中创建 icons.js 文件，并导入您想要使用的 SVG 图标： ```js import { defineIcons } from 'unplugin-icons' // 导入 svg 图标 import { mdiFacebook, mdiTwitter, mdiInstagram } from '@mdi/js' // 定义图标 const icons = defineIcons({ facebook: mdiFacebook, twitter: mdiTwitter, instagram: mdiInstagram, }) export default icons ``` 3. 在 Vue.js 组件中使用 SVG 图标作为组件： ```vue <template> <div> <facebook-icon /> <twitter-icon /> <instagram-icon /> </div> </template> <script> import icons from './icons' export default { components: icons, } </script> ``` 在上面的代码中，我们首先在 icons.js 文件中定义了三个 SVG 图标：facebook、twitter 和 instagram。然后，我们将这些 SVG 图标作为组件导入到 Vue.js 组件中，并在组件中使用它们。 使用 unplugin-icons，您可以轻松地在 Vue.js 项目中管理和使用 SVG 图标。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值