깃털 아이콘 사용량(Vue).JS

깃털 아이콘 사용량(Vue).JS

나는 새로운 vue 프로젝트에 페더리콘을 사용하려고 노력해왔다.나는 처음에 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 구성 요소의 아이콘을 사용해 보았다.

여보세요.뷰:

<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 파일에 직접 페더아이콘을 포함시켜보았지만 문제는 계속된다.

나는 이 원인이 무엇이든지 간에 페더아이콘을 호출하는 데 필요한 i 태그의 데이터 수집 속성과 관련이 있다고 추측한다.

거의 두어 시간 동안 해왔지만, 노력한 것은 아무 것도 효과가 없는 것 같다.어떤 도움이라도 감사할 것이다.고마워요.

업데이트 1: @yuriy636의 제안대로, 나는 앱 구성요소에 페더아이콘을 수입한 후 탑재된 peather.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와 함께 페더아이콘의 사용을 용이하게 하는 vue-feather-icons라는 모듈이 있다.그냥 설치해서 수입해서 쓰세요.이것으로 문제가 해결된 것 같다.

코멘트 나사산을 요약하고 후세를 위한 다른 해결책 제시:

1. 원래 코드와 관련된 문제는 다음 번호로 전화를 걸 수 없다는 것이다.feather.replace, 그리고 모든 요소들을 찾아낸다.data-feather속성을 지정하고 해당 아이콘의 SVG로 대체하십시오.
2. 호출feather.replace에서mounted후크는 단순한 사용 사례에 충분하지만 아이콘의 변경을 허용하지 않는다.(일반적으로 비 Vue 코드가 Vue를 렌더링하기 위해 사용하고 있는 HTML을 수정하게 하는 것은 좋지 않은 생각이라는 생각이 든다.) 예,<i v-bind:data-feather="iconName"></i>후속 업데이트는 허락하지 않을 겁니다
3. vue-feather-icon 부에와 더 잘 통합되는 프로젝트로 보인다.

아래는 "바닐라"를 사용하는 더 좋은 방법이다.feather-icons위와 같은 문제에 부딪히지 않고여기서는 의 HTML 컨텐츠를 동적으로 업데이트하고 있으며div호출하는 계산된 속성을 사용하여 해당 아이콘 SVGfeather.toSvg:

<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>

이 작업은 기능 구성 요소로도 수행될 수 있으며, 아이콘 이름을 사용하여 단순히 렌더링할 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>

참조URL: https://stackoverflow.com/questions/44959753/feather-icons-usage-in-vue-js