我们选择的是第二种方式使用svg-sprite-loader进行svg到icon的转换 编写SvgIcon组件 组件文件结构 src/packages/SvgIcon/index.vue //src/packages/SvgIcon/index.vue<template><svgv-else:class="svgClass"aria-hidden="true"v-on="$listeners"><use:href="iconName"rel="external nofollow"/></svg></templ...
importSvgIconfrom"./index";constcomponentPlugin={install:function(vue,options){if(options&&options.imports&&Array.isArray(options.imports)&&options.imports.length>0){// 按需引入图标const{imports}=options;imports.forEach((name)=>{require(`@/assets/svg/${name}.svg`);});}else{// 全量引入图标...
2.插入svg-sprite-loader包 npm i svg-sprite-loader 3.在src文件夹下创建icon文件夹 结构如下: 4.icon中index.js import Vue from 'vue'import SvgIcon from'@/components/SvgIcon'//svg组件//register globallyVue.component('svg-icon', SvgIcon) const requireAll= requireContext =>requireContext.keys()...
<template><svgclass="svg-icon"aria-hidden="true"><use:xlink:href="`#icon-${name}`"/></svg></template>exportdefault{name:'SvgIcon',props:{name:{// svg文件名称type:String,required:true}}}.svg-icon{width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;}复制代码...
使用格式<svg-icon icon-class="文件名"/>。这里的文件名就是在src/icons/svg下的文件名 5.图片搜集 推荐在iconfont.cn/去下载你要用的svg 原理 1.svg-icon是一个全局组件,在src/icons/index.js中定义并注册成立全局组件。 2.在main.js中引入了 3.它额外需要svg-sprite-loader@4.1.3的配合,及对应的vue...
.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } 3.在main.ts中导入组件,并全局挂载。 importIconSvgfrom"./components/Icon.vue"app.component('icon-svg',IconSvg) 4.在你想要引用的位置使用组件icon-svg 其中icon-class为iconfont中图标的名...
使用流程: 首先安装我们需要安装 vue-svgicon yarnaddvue-svgicon 创建相关目录 1. 我们需要在项目中创建一个文件夹来存储svg图标。 icons文件夹来存放资源 svg目录用来存放原始的svg资源 components目录用来存放转换过的ts文件 2. 在package.json文件配置命令将svg文件转换为ts文件, ...
1. 安装并引入svg-icon相关的Vue 3插件或组件 首先,你需要安装一个能够将SVG图标转换为Vue组件的插件,比如vite-plugin-svg-icons。如果你使用的是Vite构建工具,可以通过以下命令安装: bash pnpm install vite-plugin-svg-icons -D 或者如果你使用的是npm: bash npm install vite-plugin-svg-icons --save-dev...
$ npm install vue-svg-icon --save-dev 1. 安装之后,可以在node_modules/vue-svg-icon目录下找到相关文件 2. 将 svg 图片放入 src/svg src 文件夹和node_modules在同一个文件夹下 3. 引入 vue-svg-icon 大部分看到的教程里都说在 项目的 main.js 入口引入 vue-svg-icon 和需要使用的 svg 文件(不需...
目前,SVG Sprite 最佳实践是使用 symbol 元素。 将各个图标合并成一个包含多个 symbol 的 SVG 文件,在需要使用图标的地方,引用对应的 symbol 即可。那么如何将多个图标合并成一个包含多个 symbol 的 SVG 文件呢? 手动合并,这是最简单易上手的方式。项目初期使用少量 icon 的情况可以使用。但是当项目逐渐庞大起来,...