Question

我一直在尝试在新的vue项目中使用 feather-icons 。我首先使用vue-clie工具初始化项目：

vue init webpack

一旦完成，我跑了：

npm install
npm run dev

之后我通过npm安装了feather-icons，如下所示：

npm install --save feather-icons

完成后，我尝试通过导入main.js文件中的模块来使用图标：

main.js：

import 'feather-icons'

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

然后我尝试在Hello组件中使用一个图标：

Hello.vue：

<template>
  <div>
    <h1> Hello World!</h1>
    <i data-feather="flag"></i>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }

</script>
<style>
</style>

执行期间未检测到错误，但图标集拒绝工作。我已尝试直接在index.html文件中包含feather-icons，但问题仍然存在。

我猜测导致这种情况的是与 i 上 data-feather 属性相关的标签需要调用feather-icons。

我已经在这里待了将近几个小时，但我尝试的任何东西似乎都没有用。任何帮助，将不胜感激。感谢。

更新1： 根据@ yuriy636的建议，我在我的App组件中导入了feather-icons，然后在mount中调用了feather.replace（）：

App.vue：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

  import feather from 'feather-icons'

  export default {
    name: 'app',

    mounted() {
      feather.replace();
    }
  }

</script>

<style>
</style>

更新2：

正如@smarx所指出的，有一个名为 vue-feather-icons 的模块，可以方便地使用带有vue的羽毛图标。只需安装它，导入并使用它。这似乎解决了这个问题。

Answer 1

总结评论主题并为后代提出另一个解决方案：

原始代码的问题在于，feather.replace缺少对data-feather的调用，它会查找具有feather.replace属性的所有元素，并将其替换为相应的图标的SVG。
在mounted挂钩中调用<i v-bind:data-feather="iconName"></i>对于简单的用例来说已经足够了，但它不允许图标更改。（一般来说，让非Vue代码修改你使用Vue渲染的HTML是个坏主意。）例如，feather-icons不允许后续更新。
vue-feather-icon似乎是一个与Vue更好地整合的项目。

以下是更好的使用方式＆＃34; vanilla＆＃34; div没有遇到上述问题。在这里，我们使用调用feather.toSvg的计算属性，使用适当的图标SVG动态更新<template> <div id="app"> <h1>{{ message }}</h1> <div v-html="iconSvg"></div> <button @click="clicky">Click me</button> </div> </template> <script> import feather from 'feather-icons' export default { name: 'app', data: function () { return { message: 'Hello, World!', icon: 'flag' } }, computed: { iconSvg: function () { return feather.toSvg(this.icon) } }, methods: { clicky: function () { this.message = 'clicked' this.icon = 'circle' } } } </script>的HTML内容：

df<- data.frame(region= c("1","1","1","1","1","2","2","2","2","2","2"),loc=c("104","104","104","105","106","107","108", "109", "110", "110", "111"), interact= c("A_B", "B_C", "A_B", "B_C", "B_C", "A_B", "G_H", "I_J", "J_K", "L_M", "M_O"))

Answer 2

这也可以作为功能组件来完成，您可以使用图标名称来选择要渲染的svg。

您还可以换掉羽毛并使用另一个svg-sprite

// Usage    
    <div class="flex items-center p-2 mt-2 bg-white">
      <x-svg icon="log-out" class="w-4 h-4" />
    </div>

 // x-svg.vue
    <template functional>
      <svg
        fill="none"
        :viewBox="props.viewBox"
        :class="['stroke-' + props.stroke, data.class, data.staticClass]"
        class="inline-flex w-4 h-4 text-gray-500 stroke-current hover:text-gray-900 group-hover:text-gray-900"
        stroke-linecap="round"
        stroke-linejoin="round"
        :ref="data.ref"

        :style="[data.style, data.staticStyle]"
        v-bind="data.attrs"
        v-on="listeners"
      >
        <use :href="require('@/assets/img/feather-sptite.svg') + '#' + props.icon" />
      </svg>
    </template>

    <script>
    export default {
      props: {
        icon: {
          type: String,
          default: 'alert-circle'
        },
        stroke: {
          type: Number,
          default: 1,
          validator(v) {
            const sizes = [0.5, 1, 1.5, 2, 2.5]
            return sizes.includes(v)
          }
        },
        viewBox: {
          type: String,
          default: '0 0 24 24'
        }
      }
    }
    </script>

在Vue.JS中羽毛图标用法

2 个答案: