如下设置,显示的图标大约只有5像素大小,快看不见了,为什么?(实际图标很大) .parameter-icon { width: 64px; height: 40px; } .svg-icon { width: 38px; height: 33px; color: #888; opacity: 0.2; } vue.jscss 有用关注2收藏 回复 阅读1.7k 1 个回答 得票最新 Meathill 22.2k123642 发布于 ...
4、创建SvgIcon.vue src/compoments/SvgIcon.vue <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> export default { name: 'svg-icon', props: { iconClass: { type: String, required: true }, className: { type: String } ...
})<template></template>.svg-icon { display: block; width: 42px; height: 40px; background-color: #252525; cursor: pointer; }
可以通过上述的一般用法在 Vue 中直接使用 svg,但既然已经是用 Vue来组件化开发项目了,那么在组件中穿插着一大段的 svg 也显得过于杂乱; 这里可以通过 svg 的 use 标签,将 svg 的一大段绘制代码封装在 symbol 中,然后通过 use 调用。 例如,将所有绘制 svg 的代码放到 svg-icon.vue 文件中,所有图标的绘制代码...
通过icon-font快速给图标批量去色 1.安装依赖 npm install svg-sprite-loader --save-dev 2.(这里使用vue-cli 4以上版本) 修改vue.config.js配置文件 const path = require('path') const resolve= dir =>{returnpath.join(__dirname, dir) }
Vue.component('svgIcon',svgIcon) 1. 2. 3. 下载svg图标 在src文件下新建文件夹svg,所有下载的SVG图标放入其中。 批量下载图标的方法,可参考链接 4. 使用svg图标 以del.svg图标为例,修改scale的值调整图标的大小。 <svgIconname="del":scale="1"/> ...
vue项目中时常需要引用icon图标,特地写一个组件用于引用svg icon。 1.将你想要的svg加入购物车,点击下载代码 打开下载的文件夹,将其中的js文件复制进你的项目 在index.html中引入该js文件 2.创建icon.vue组件 <template> <svg class="svg-icon" aria-hidden="true"> ...
二、SVG在vue项目中的配置与使用 2.1、src--assets--icons--svg(存放你的svg图标) image.png 2.2、src--assets--icons--index.js importVuefrom'vue'importSvgIconfrom'@/components/SvgIcon'// svg component// register globallyVue.component('svg-icon',SvgIcon)constreq=require.context('./svg',false,...
</svg> </template> import {computed} from 'vue' const props = defineProps({ //图标大小 size:{ type:[Number,String], default: '16px' }, //图标颜色 color:{ type:String, default:"#606266" }, //图标前缀,默认icon prefix:{ type:String, default...