1、阿里图标库 https://www.iconfont.cn/ 2、选中图标,点击下载,复制SVG代码 3、新建 icons 文件夹 位置:src/assets/icons,与上面的配置文件对于 4、新建文件 xx.svg,并把复制的SVG代码,粘贴 三、封装 1、新建 文件: SvgIcon.vue 路径:src/components 2、内容 <templ
其中svg文件夹存放所有的svg文件 5、在icons下新建index.js,内容如下: vue2 import Vuefrom'vue'import SvgIconfrom'@/components/svgIcon'Vue.component('svg-icon', SvgIcon)constrequireAll = requireContext =>requireContext.keys().map(requireContext)constreq = require.context('./svg',false, /\.svg...
在Vue 3项目中使用SVG图标,你可以按照以下步骤进行: 1. 安装并引入SVG图标库 如果你打算使用外部SVG图标库,如Font Awesome或Material Design Icons,可以通过npm或yarn安装。以Font Awesome为例: bash npm install @fortawesome/fontawesome-free 然后在你的Vue项目的入口文件(如main.js或main.ts)中导入所需的图标...
(一)安装依赖 vite-plugin-svg-icons vite-plugin-svg-icons 的优点: 预加载: 在项目运行时就生成所有图标,只需操作一次dom 高性能: 内置缓存,仅当文件被修改时才会重新生成 npm install vite-plugin-svg-icons -D (二)配置 在vite.config.ts中进行配置 import { createSvgIconsPlugin } from 'vite-plugin-...
vue3中使用svg图标 samuelhh 1 人赞同了该文章 演示代码使用 vite创建的 vite+ts+vue3项目,具体创建方法:cn.vitejs.dev/guide/ 1、安装 vite-plugin-svg-icons和fast-glob 插件: //首先安装vite-plugin-svg-icons npm i vite-plugin-svg-icons -D //再安装fast-glob npm i fast-glob -D 安装完成后...
3. 4. 5. 6. 7. 8. 9. 在入口文件进行配置: import 'virtual:svg-icons-register' 1. 使用方法 在assets/icons/ 下引入 svg 格式的文件,并给图标命名。 只需在需要的地方,使用 svg 引入图标即可。需要注意的点是:xlink:href用哪个图标,其属性值必须是 #icon-图标名字。
简介:vue3+vite项目中使用svg图标 引言 项目中有很多地方需要用到svg图标,Element Plus 组件库提供了一套常用的图标,但是往往不能满足需求,而网上比较全的就是阿里图标库,下面就介绍如何将阿里图标库中的svg图标引入到自己的项目中。 1. vite-plugin-svg-icons插件 ...
import'virtual:svg-icons-register' 1. 创建SvgIcon组件 /src/components/SvgIcon/index.vue <template><svgaria-hidden="true"class="svg-icon":width="props.size":height="props.size"><use:xlink:href="symbolId":fill="props.color"/></svg></template>import{computed}from'vue'constprops=defineProps...
vue3使用svg图标 安装 // 通过命令安装2个插件 npm i vite-plugin-svg-icons -D npm i fast-glob -D 在vue.config.js中配置 //vue.config.js import { fileURLToPath, URL } from &#
作用 自动注册svg图标,使svg图标在项目中能够被正确加载和使用。 使用教程 在vue3+vite+ts项目中使用。 安装依赖包 需要安装两个包,一个是vite-plugin-svg-icons,一个是fast-glob,fast-glob 是一个高性能的文件路径匹配库,它可以根据指定的 glob