1. 安装并引入所需的SVG图标库 虽然Vue 3没有内置的SVG图标库,但你可以使用诸如Font Awesome、Heroicons或Material Icons等流行的图标库。如果你有自己的SVG图标文件,也可以直接使用。 假设你有一个名为icons的文件夹,里面包含了一些SVG文件,你可以将它们直接放在Vue项目的src/assets目录下。 2. 在Vue 3项目中注...
(一)安装依赖 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图标 安装 // 通过命令安装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文件 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...
3. 4. 5. 6. 7. 8. 9. 在入口文件进行配置: import 'virtual:svg-icons-register' 1. 使用方法 在assets/icons/ 下引入 svg 格式的文件,并给图标命名。 只需在需要的地方,使用 svg 引入图标即可。需要注意的点是:xlink:href用哪个图标,其属性值必须是 #icon-图标名字。
5、页面中使用该组件: /view/test.vue 我们可以从iconfont-阿里巴巴矢量图标库上面下载一个svg图标,假如我已经下载home.svg, 记得和你vite.config.ts里面配置的路径保持一致,/assets/svg/home.svg <template><svgIconiconName="home":size="50"></svgIcon></template>importsvgIconfrom"@/components/SvgIcon.vue...
本文的项目使用vue3+vite来构建,可以使用第三方的vite-plugin-svg-icons插件,来引入svg图标。 安装 安装vite-plugin-svg-icons插件 # npmnpm i vite-plugin-svg-icons -D# yarnyarn add vite-plugin-svg-icons -D# pnpmpnpm install vite-plugin-svg-icons -D ...
│ │ │ ├─index.ts 加载本地SVG文件的实现 │ │ │ ├─index.vue svg显示组件的实现 │ │ ├─index.vue Icon 组件的实现 │ │ └─selector.vue 图标选择器组件的的实现|├─utils │ │ ├─iconfont.ts字体图标辅助函数库 │ │ └─common.ts公共辅助函数库 ...
本地的png、svg图标,Element图标,还有就是通过自动导入使用三方库iconify的图标 一、iconify插件 Iconify for Vue 官方文档 Iconify内的 element-plus图标 Iconify 是一个开源的图标集和图标管理工具。它提供了一个庞大的图标库,包含数千个常用图标,涵盖了各种主题和风格,如 Material Design、Font Awesome、Feather 等...
3、添加icon-svg组件 在main.js中 新增全局组件 //引入svg组件 import IconSvg from './components/IconSvg' // //全局注册icon-svg Vue.component('icon-svg', IconSvg) 4、配置vue.config.js 注意点: 这里我把.svg图标放在了/src/assets/icons目录下 如果要修改存放图标目录的话 则记得修改配置 ...