vue3에서 svg 아이콘을 사용하는 방법

방법 1 온라인 링크를 사용하여 액세스

iconfont에서 프로젝트 아이콘을 찾고 기호를 선택하여 온라인 링크를 가져옵니다

2: vue3 프로젝트에서 공개 index.html을 찾아 스크립트를 소개합니다

브라우저에서 보기 열기: 자동으로 본체에 주입됩니다

프로젝트에서 직접 사용

   //控制图标的大小
   <svg >
      <use href="#icon-shanchu" rel="external nofollow" ></use>
    </svg>

, 삭제된 아이콘이 표시됩니다

방법 패키지를 작성합니다(위 코드도 다음을 반복하여 캡슐화합니다)

1: svg 아이콘을 얻기 위해 특별히 새 구성 요소를 만듭니다

icon.vue (svg/index.vue)

 <template>
  <div>
    <svg :>
      <use :href="names" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
  </div>
</template>

<script setup>
import { defineProps, withDefaults } from "vue";
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  style: {
    type: Object,
    default: () => {
      return {
        width: 10,
        height: 10,
        color: "",
      };
    },
  },
});
const names = `#${props.name}`;
</script>

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

An 아이콘을 표시해야 하는 인터페이스

<template>
  <div class="home"> 
    <icon   :  name="icon-shanchu"  ></icon>
    <icon   :  name="icon-shanchu"  ></icon>
  </div>
</template>

<script setup>
import { ref } from "vue";
import icon from "../assets/svg/index.vue";
</script>
<style lang="scss">
 
</style>

아이콘폰트의 아이콘과 사용자 정의 아이콘을 함께 사용하는 경우 전송된 이름에 따라 어떤 아이콘을 사용할지 지정할 수 있습니다

icon.vue ( svg/index.vue)

<template>
  <div>
    <svg :>
      <use :href="names" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
   // 自定义的图标
    <svg width="0" height="0">
      <defs>
        <symbol id="more" viewBox="0 0 100 100">
          <circle
            r="5"
            cx="20"
            cy="25"
            fill="transparent"
            stroke="green"
          ></circle>
          <circle r="5" cx="20" cy="50" fill="currentColor"></circle>
          <circle r="5" cx="20" cy="75" fill="currentColor"></circle>
          <line
            x1="40"
            y1="25"
            x2="90"
            y2="25"
            stroke-width="8"
            stroke="currentColor"
          ></line>
          <line
            x1="40"
            y1="50"
            x2="90"
            y2="50"
            stroke-width="8"
            stroke="currentColor"
          ></line>
          <line
            x1="40"
            y1="75"
            x2="90"
            y2="75"
            stroke-width="8"
            stroke="currentColor"
          ></line>
        </symbol>  
      </defs>
    </svg>
  </div>
</template>

<script setup>
import { defineProps, withDefaults } from "vue";
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  style: {
    type: Object,
    default: () => {
      return {
        width: 10,
        height: 10,
        color: "",
      };
    },
  },
});
const names = `#${props.name}`;
</script>

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

사용 :

<template>
  <div class="home"> 
    <icon  :   name="icon-shanchu" ></icon>
    <icon  :  name="icon-shanchu1"  ></icon>
    <icon : name="more"></icon>
  </div>
</template>

<script setup>
import { ref } from "vue";
import icon from "../assets/svg/index.vue";
</script>
<style lang="scss">
 
</style>

iconfont 공식 웹사이트의 아이콘 svg 코드를 복사하는 경우:

cv에서 직접 사용할 수도 있습니다. 프로젝트:

<svg
      t="1673881805558"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="1076"
      width="200"
      height="200"
    >
      <path
        d="M658.276045 767.993958 658.276045 274.295l329.126 0L987.402045 219.44 658.276 219.44l0-18.281c0-80.787046-65.492992-146.284032-146.276045-146.284032-80.790016 0-146.276045 65.496986-146.276045 146.284032l0 18.281L36.597 219.44l0 54.855 109.695 0 0 694.83L877.7 969.125l0-548.55-54.855 0L822.845 914.27l-621.69 0L201.155 274.295l164.569 0 0 493.699 54.848 0L420.572 274.295l182.85 0 0 493.699L658.276 767.994zM420.571034 219.440026l0-18.281c0-50.492006 40.932966-91.420979 91.428966-91.420979 50.489037 0 91.420979 40.928973 91.420979 91.420979l0 18.281L420.571 219.440026z"
        p-id="1077"
      ></path>
    </svg>

효과는 다음과 같습니다:

위 코드를 변환하여 icon.vue(svg/index.vue) 변환에서 직접 사용할 수도 있습니다

위 내용은 vue3에서 svg 아이콘을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!