.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } 当然如参考文章所言,我们须加载依赖svg-sprite-loader,在webpack.base.conf.js 中具体为什么这么用,请参考优雅的使用icon。因为组件已经
第一步 npm i -D svg-sprite-loader 第二步 webpack.base.conf.js下添加 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 { test: /\.svg$/, loader:'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId:'icon-[name]' } }, { test: /\.(png|jpe?g|gif...
<use> 元素从 SVG 文档中获取节点,并在其他地方复制它们。 <template><svgv-else:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href="iconName"/></svg></template>import { isExternal } from "@/utils/validate"; export default { name: "SvgIcon", props: { iconClass: { ...
vue项目中时常需要引用icon图标,特地写一个组件用于引用svg icon。 1.将你想要的svg加入购物车,点击下载代码 打开下载的文件夹,将其中的js文件复制进你的项目 在index.html中引入该js文件 2.创建icon.vue组件 <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> ...
{createPinia}from'pinia'importAppfrom'./App.vue'constapp=createApp(App)app.component("SvgIcon",SvgIcon)// 【svg-icons相关】app.use(router)app.use(ElementPlus)app.use(createPinia())// 全局注册使用 element plus 的图标for(const[key,component]ofObject.entries(ElementPlusIconsVue)){app....
二、SVG在vue项目中的配置与使用 1. 下载 npm install vue-svg-icon xml-loader -D 2. 下载的.svg的文件,存放于src/icons/svg文件 3. 配置src/icons/index.js文件 importVuefrom'vue'importSvgIconfrom'@/components/SvgIcon'// svg component// register globallyVue.component('svg-icon',SvgIcon)// 在...
首先,你要有一个自己的SvgIcon图标库,这个可以在网上搜,一般只要不用百度,还都是可以搜到的(为什么,你们自己懂) 将这个文件夹导入项目中,如下所示: 然后,打开main.js,导入图标,并进行全局注册 import SvgIcon from '@/icons' const app = createApp(App) ...
工作中用到svg格式的图标,既然是svg,当然不想用古老的img方式引用,希望能凭借定义svg的fill属性,随意定义图标的颜色;同时不想将整段svg代码写入组建内,于是找到了使用vue-svg-icon来实现这个功能。 项目参考链接:https://www.npmjs.com/package/vue2-svg-icon ...
// 本地SVG图标import'virtual:svg-icons-register' 二,使用 (一)封装组件 创建一个SPIcon组件,封装svg。避免重复编码 <template><svgaria-hidden="true"class="svg-icon":style="{height:size,width:size}"><use:xlink:href="symbolId":fill="color"></use></svg></template>import{computed}from'vue'...
一种解决方法是,利用 svg的 use标签,不直接在主页面中编写绘制svg图标的代码,而是把这一大段的代码放到另外的文件中,然后使用 use引用这段绘制图标的代码即可(好像饿了么移动端就是这么干的)。 例如,将所有绘制 svg的代码放到 svg-icon.vue文件中,所有图标的绘制代码使用 symbol标签分隔开并单独命名,避免错乱,然...