三、在src下新建icons文件夹,及icons文件夹下svg文件夹、index.js文件,将svg图片放入svg文件夹中,在 index.js文件中添加如下内容 importVuefrom'vue'importSvgIconfrom'@/components/SvgIcon'// svg 组件// 全局注册svg组件Vue.component('svg-icon',SvgIcon)// 工程化导入svg图片constreq =require.context('./...
阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName"></use></svg></template>export default { name: 'svg-icon', props: { iconClass: { t...
Element Plus 图标库往往满足不了实际开发需求,可以引用和使用第三方例如 iconfont 的图标,本节通过整合 vite-plugin-svg-icons 插件使用第三方图标库。 一、安装 vite-plugin-svg-icons npm i fast-glob@3.2.11 -D 1. npm i vite-plugin-svg-icons@2.0.1 -D 1. 二、创建图标文件夹 在src/assets文件夹下...
阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName"></use></svg></template>exportdefault{name:'svg-icon',props: {iconClass: {type:String,...
1.新建存放svg图标的目录 在项目 src 目录下新建 src/icons/svg 目录(存放 svg 图标文件)。 2.创建svg文件的入口文件 在src/icons 下创建 icons 目录的入口文件 index.js ,负责svg文件的加载 importVuefrom'vue' importSvgIconfrom'@/components/SvgIcon' ...
在Vue-CLI中配置svg的icon,可以参照下面的步骤。 需要用到雪碧图的loader,解析svg。 npm install svg-sprite-loader --save-dev 复制代码 配置vue.config.js,加入sprite-loader的解析。 module.exports={chainWebpack:config=>{// 原svg规则覆盖了所有的svg图标,需要先将自己的svg排除,以应用新的sprite规则// ...
//main.jsimport'virtual:svg-icons-register'//导入全局的svg图标 使用 代码语言:javascript 复制 <template><svg aria-hidden="true"class="cp-icon"><use href="`#icon-search"/><!--svg路径:src/assets/svgs/search.svg--></svg><svg aria-hidden="true"class="cp-icon"><use href="`#icon-my...
我们可以从iconfont-阿里巴巴矢量图标库上面下载一个svg图标,假如我已经下载home.svg, 记得和你vite.config.ts里面配置的路径保持一致,/assets/svg/home.svg <template><svgIconiconName="home":size="50"></svgIcon></template>importsvgIconfrom"@/components/SvgIcon.vue" 效果如下图:...
symbolId: 'icon-[name]' }) .end() } } 3,在src/components目录下添加SvgIcon文件夹,接着在文件夹内创建index.vue <template> <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :href="iconName" /> </svg> ...
参考Vue项目中使用svg图标这篇软文质量不错, 依葫芦画瓢,也跑通了 1.慢慢在理解其中包含的知识 2. 把自己理解换一种方式表达一下 我们想在vue页面使用svg图标,例如 <template> Svg实践,在页面中使用 <svg-icon icon-class="add"></svg-icon> <svg-icon icon-class...