3.在src文件夹下创建icon文件夹 结构如下: 4.icon中index.js 1 2 3 4 5 6 7 8 9 importVue from'vue' importSvgIcon from'@/components/SvgIcon'// svg组件 // register globally Vue.component('svg-icon', SvgIcon) const requireAll = requireContext => requireContext.keys().map(requireContext)...
<svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"/> </svg> </template> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName() { return `...
<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> icon-资源数量 <g id="icon-资源数量" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M869...
这样能把你文件里的svg图片全部都引入,你只需要使用use使用就可以了 同时你也可以把这些全部封装成一个Icon组件,使用时只需要给个name就能直接显示图片了 我直接上图片 这样你就能直接给个name就能加载出图片了 "svg-sprite-loader": "^4.1.6", "svg-sprite-loader-mod": "^4.1.6-mod1", "svgo-loader":...
在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规则// ...
vue项目中时常需要引用icon图标,特地写一个组件用于引用svg icon。 1.将你想要的svg加入购物车,点击下载代码 打开下载的文件夹,将其中的js文件复制进你的项目 在index.html中引入该js文件 2.创建icon.vue组件 <template> <svg class="svg-icon" aria-hidden="true"> ...
.icon{width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;} 第三步...
.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } 在src下新增文件夹icons/svg存放svg图 icons/index.js代码如下: import Vue from ‘vue‘ import SvgIcon from ‘@/components/SvgIcon‘// svg组件 // register...
创建一个新的Vue组件文件(例如SvgIcon.vue)。 在组件文件中引入SVG代码。 在其他Vue组件中引用该组件。 示例: SvgIcon.vue <template> <svg :width="width" :height="height" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> ...
Vue.component('svgIcon',svgIcon) 1. 2. 3. 下载svg图标 在src文件下新建文件夹svg,所有下载的SVG图标放入其中。 批量下载图标的方法,可参考链接 4. 使用svg图标 以del.svg图标为例,修改scale的值调整图标的大小。 <svgIconname="del":scale="1"/> ...