VueJS - 羽毛图标的无效渲染

Question

我有一个应用程序，我尝试渲染羽毛图标（在菜单和应用程序的某些部分）。

问题是当我点击某个锚标记并将自己路由到另一个组件时，图标会消失，直到我点击“刷新 (F5)”。之后它们看起来很好。

有什么我遗漏的吗？我是否必须为每条路线“强制”重新加载？

文件如下：

index.html - 我在这里导入羽毛图标

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>My App</title>
  </head>
  <body>
    <noscript>Sorry, this app doesn't work without javascript enabled!</noscript>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
  </body>
</html>

当我加载主页时 - 一切都很好......但是当我“路由”到其他 page/compoment 它会消失，直到我 refresh/reload (F5) 页面

routes.js

import Home from './components/Home.vue'
import Login from './components/Login.vue'
import NotFound from './components/generic/404.vue'


import Customer from './components/admin/Customer.vue'
import AddCustomer from './components/admin/AddCustomer.vue'

export const routes = [
  { path: "", name: 'home', component: Home},
  { path: "/login", name: 'login', component: Login},

// customers
  { path: "/customers", name: 'customers', component: Customer},
  { path: "/add-customer", name: 'add-customer', component: AddCustomer},

 // 404
  { path: "/not-found", name: 'not-found', component: NotFound},
  { path: "*", redirect: { name: 'not-found'}},
]

这是我的添加客户

<template lang="html">
  <div class="main">
    <tw-navbar></tw-navbar>

    <div class="container-fluid">
     <div class="row">
       <tw-sidebar></tw-sidebar>

         <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
              <div class="container">
                <h1 class="h2">Add new customer</h1>
                <form class="w-50 m-auto">
                <div class="form-group">
                  <label for="username">Username</label>
                  <input type="username" class="form-control" id="username" placeholder="Enter username">
                </div>
                <div class="form-group">
                  <label for="password">Password</label>
                  <div class="input-group mb-2 mr-sm-2">
                    <input type="password" class="form-control"
                            id="password" placeholder="Password"
                            v-model="password">
                    <div class="input-group-append">
                      <div class="input-group-text">
                        <span data-feather="eye" v-if="isVisible"></span>
                        <span data-feather="eye-off" v-if="!isVisible"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
              </div>
            </div>
         </main>
     </div>
    </div>
  </div>
</template>

<script>
  import Navbar from './../navigation/Navbar.vue'
  import Sidebar from './../navigation/Sidebar.vue'
  import CustomerService from './../../services/CustomerService'
  import generator from './../../helpers/generator'

    export default {
      data() {
        return {
          username: null,
          password: null,
          passwordAgain: null,
          nameFirst: null,
          nameLast: null,
          email: null,
          isVisible: false,
        }
      },
      components: {
        'tw-navbar': Navbar,
        'tw-sidebar': Sidebar,
      },
      methods: {
      },
      mounted() {
      }
    }
</script>

<style lang="css" scoped>
</style>

当我检查源代码时..在我按下 F5 之前它不会渲染 SVG

基于此thread 羽毛图标似乎与 VUE 不兼容:(

Answer 1

如果你想包含一些第三方包，搜索 vue.js 兼容包总是好的

有 vue-feather-icons 为 vue 制作的额外包

npm i vue-feather-icons

那么你可以简单地把它当作组件来使用：

你需要使用 pascal 大小写，你需要写 Icon 和结尾

import { EyeIcon } from "vue-feather-icons";
components: {
   EyeIcon
}

你可以给它加上样式，你可以给它添加类，你可以用它做任何你想做的事。它还有一个名为 size 的道具，您可以在其中设置图标的大小

<EyeIcon size="2x" />

https://vue-feather-icons.egoist.sh/

VueJS - 羽毛图标的无效渲染

VueJS - invalid rendering of feather icons

javascript

vue.js

feathericons