1. 先编写一个SvgIcon组件 <template><svgclass="svg-icon"aria-hidden="true"><use:xlink:href="iconName"/></svg></template>exportdefault{ name:'SvgIcon', props: { icon: { type: String, required:true, }, }, computed: { iconName() {return'#icon-'+this.icon; }, }, };.svg-icon...
整个vue组件导出一个大的 svg,此svg中包含了许多小的图标,类似于精灵图,每个图标使用 symbol分隔,并单独命名以方便引用。 使用示例如下: // index.vue ... ... 然后,就可以看到网页中顺利出现对应的 svg图标了: 不过,还有个问题,如果当前网站需要用到的 svg图标很多,势必就造成 svg-icon.vue这个文件体积逐渐...
现在Icon组件是功能性的了,我们需要在src/mail.js中注册到Vue实例中: <!-- src/main.js --> import iconComponent from './components/svgSprites/Icon' Vue.component('icon', iconComponent) 为了区分前面的示例,这里为SVG Sprites单独创建一个独立的组件,比如SvgSpritesIcon.vue组件,然后再这个组件中调用: <...
一、安装组件svg-sprite-loader npm install svg-sprite-loader --save-dev 二、在src/components下新建文件夹及文件SvgIcon/index.vue,index.vue中内容如下 <template><svg:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href="iconName"/></svg></template>export default { name: "...
.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } 5.在入口文件main.js中引入 6.到此我们的组件和配置都已经完成了,可以愉快的使用了 到此就完成了vue中使用svg的功能了。现在我们再来关注下index.js中require.context的使用。为什么要用这个api呢...
使用 在components下创建svg文件夹,创建Svg.vue文件: <svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName"></use></svg> 在utils文件夹下创建svgConfig文件夹,创建index.js文件,全局注册svg-icon组件。 Vue.component('svg-icon', SvgIcon) ...
使用组件的时候可以通过传值iconName和iconColor确定图标的类型和颜色。 全局注册组件 因为可能很多地方都会用到图标,这里选择全局注册SvgIcon.vue组件。在src/assets/img/icons文件夹下新建index.js文件: 代码语言:javascript 复制 // 全局引入 svgIcon 组件importVuefrom'vue'importSvgIconfrom'@/components/common/ic...
此乃一Vue组件,名为SvgIcon,其功能为展示SVG图标。其成立之目的,正是为了使吾等在项目中使用SVG图标时能变得更为便捷。 代码语言:javascript 复制 name:'SvgIcon' 此组件接受两属性,名若iconClass及className。依iconClass之值,此组件能展示各异之图标。className则为CSS类名,用以定制SVG图标之样式。
1、基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标。 本文以vue项目为例,当然在react中的使用原理基本相似。 svg图标可以直接通过img标签来使用,也可当做icon来使用。 本文是参考了鑫旭大佬的文章:SVG Sprite技术介绍。 2、配置 安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url...
1、设置组件 component/icon-svg.vue {代码...} 2、注册全局组件,在src目录下新建文件夹icons,结构如下icons/svg放所有的svg类型的图标,在index.js中注册 ...