return 'svg-icon ' + this.className } else { return 'svg-icon' } }, styleExternalIcon() { return { mask: `url(this.iconClass)no−repeat50this.iconClass)no−repeat50{this.iconClass}) no-repeat 50% 50%`, } }, }, } .svg-icon { width: 1em; height: 1em; vertical-align...
import '@/icons' // icon 2.4 在页面中使用组件 每次使用图标都很方便,只需要一行代码就知道 <svg-icon icon-class="user" /> 就是这样,谢谢。
使用.svg文件的名称,通过icon-class属性来引用。 <svg-icon icon-class="user"/>
<svg-icon icon-class="user" class-name="eye"></svg-icon> <router-link to="/about">go about</router-link> </template> @@ -14,6 +15,7 @@ import { Button, Field } from 'vant' import { mapActions, mapMutations, mapGetters } from 'vuex' // createNamespacedHelpers import servic...
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`, } }, }, } .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; /* currentColor 表示一个变量,若未赋值color,则继承父级color */ overflow: hidden; } .svg-external-icon...
<svg-iconicon-class="user"></svg-icon> 2、使用 svg-sprite 接下来我们就要自己来制作svg-sprite了。这里要使用到svg-sprite-loader这个神器了, 它是一个 webpack loader ,可以将多个 svg 打包成svg-sprite。 我们来介绍如何在vue-cli的基础上进行改造,加入svg-sprite-loader。
exclude: [resolve('src/icons')], options:{limit:10000,name:utils.assetsPath('img/[name].[hash:7].[ext]')}}, 使用 ok,大功告成,这样就可以在.vue页面中直接使用.svg文件了。使用.svg文件的名称,通过icon-class属性来引用。 <svg-icon icon-class="user"/>...
<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: ...
六、在组件中使用 <svg-iconicon-class="user"/>//传入svg文件名称<svg-iconicon-class="password"/> 在这里插入图片描述
import SvgIcon from '@/assets/icon.svg' export default { name: 'App', components: { SvgIcon } } 三、使用 Vue 的第三方库 步骤: 安装和使用第三方库,如vue-svgicon或vue-awesome等。 按照库的文档配置和使用。 优点: 提供了丰富的功能和选项,如自动优化、按需加载等。 可以使用库...