vue的爬坑之路（四）之----基于vue-cli 动态添加iconfont的symbol方法

我们做项目的时候有时会要求用到彩色的字体图标symbol。

我在基于vue-cli的移动端项目中遇到了此问题，还牵扯到了li遍历动态添加iconfont的问题，折磨许久最终总结出以下问题

1.引入iconfont.css与iconfont.js文件（可写在你使用icon的.vue页面，也可以引到最外层的app.vue里面）

2.加入通用css代码（引入一次就行）：

.icon{
    vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
      margin:0 auto;/*px*/
      width: 63px;
      height: 63px;
  }

3.挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
   <use :xlink:href="#icon-shouyekuang-">use>
svg>

4.动态添加symbol图标，我把我遍历的方法粘贴出来供大家参考

主要是移动端导航的切换，更改当前点击的icon颜色

 <ul class="iconfont">
          <li v-for="(nav,$index) in list">
            <router-link :class="{tabTactive:nav.href==currentUrl()}" v-bind:to="nav.href">
              <svg class="icon" aria-hidden="true">
                  <use :xlink:href="nav.href==currentUrl() ? nav.srcActive : nav.src">use>
              svg>
              <span>{{nav.name}}span>
            router-link>
          li>
ul>

export default {
    data () {
      return {
        list: [
          {
            name: '首页',
            href: '/',
            src: '#icon-shouyekuang-',
            srcActive: '#icon-shouyeshuang-'
          },
          {
            name: '客服',
            href: '',
            src: '#icon-kefudan-',
            srcActive: '#icon-kefushuang-'
          },
          {
            name: '购物车',
            href: '/cart',
            src: '#icon-gouwuchedan-',
            srcActive: '#icon-gouwucheshuang-'
          }
        ]
      }
    },
    methods: {
      currentUrl () {
        var curUrl = window.location.pathname
        return curUrl
      }
    }
  }

以上就是我费劲扒拉弄出来的东西，希望有人能用上

 

转载于:https://www.cnblogs.com/nanjie/p/8575332.html