羽毛图标在Vue.JS中的使用
我一直在尝试在一个新的vue项目中使用https://feathericons.com/。我首先使用vue-clie工具初始化项目：
vue init webpack做完之后，我跑了：
npm install
npm run dev之后，我通过npm安装了羽毛图标，如下所示：
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文件中，但问题仍然存在。
我猜这与调用羽毛图标所需的data-feather i标记上的属性有关。
我已经做了将近几个小时了，但我尝试过的一切似乎都没有用。任何帮助都将不胜感激。谢谢。
更新1:按照per @yuriy636的建议，我在应用程序组件中导入羽毛图标，然后在挂载中调用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所指出的，有一个名为https://github.com/mage3k/vue-feather-icon的模块可以方便地使用vue中的羽毛图标。只需安装，导入并使用它。这似乎解决了这个问题。
回答 2
Stack Overflow用户
发布于 2017-07-06 23:47:18
总结评论线索并为后人提出另一种解决方案：
- 原始代码的问题是缺少了对
feather.replace的调用，它查找所有具有data-feather属性的元素，并将它们替换为相应图标的SVG。 - 对于简单的用例来说，在
mounted钩子中调用mounted足够好，但它不允许图标更改。(一般来说，让非Vue代码修改您使用Vue呈现的HTML是个坏主意。)例如，<i v-bind:data-feather="iconName"></i>将不允许后续的更新。 vue-feather-icon似乎是一个更好地与Vue集成的项目。
下面是使用"vanilla“feather-icons的更好方法，而不会遇到上述问题。在这里，我们使用调用div的计算属性，使用适当的图标SVG动态更新feather.toSvg的HTML内容。
<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>Stack Overflow用户
发布于 2020-03-01 11:46:40
这也可以作为一个功能组件来完成，您可以使用图标名称来简单地选择要呈现的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>https://stackoverflow.com/questions/44959753
复制相似问题
腾讯云开发者
