Vue3 프로젝트에 SVG 아이콘을 도입하는 방법을 자세히 설명하는 기사

Vue3 프로젝트에 SVG 아이콘을 어떻게 도입하나요? 다음 기사에서는 Vue3 프로젝트에 iconfont 아이콘을 도입하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

소개

학습을 통해 Express와 Mysql을 통해 얼마 전

여기서 백엔드 시스템을 구축하여 학습 기술을 통합하려고 합니다.

SVG 아이콘

페이지이기 때문에 일부 아이콘icon과 분리될 수 없어야 하므로 가장 포괄적인 알리바바 아이콘 라이브러리에 가서 찾아야 합니다

여기서 사용 방법을 설명합니다. Ali Icon Library Put things on our page

Alibaba Icon Library

페이지에 들어가서 Resource Management 아래에서 My Project를 찾아 프로젝트를 생성합니다

다음과 같이 설정

만들기 프로젝트가 끝난 후 나중에 필요한 아이콘을 찾기 위해 Alibaba의 재료 라이브러리에 들어가서

이를 쇼핑 카트에 추가하고

쇼핑 카트에 있는 아이콘을 프로젝트

에 추가했습니다.

전에 온라인 아이콘 링크 주소가 있을 텐데 소개해드리겠습니다.

하지만 지금은 찾을 수 없습니다. = =

그러면 프로젝트 Symbol에서 아이콘을 선택하고 로컬로 다운로드

해서 넣으면 됩니다. srcassetssvg 디렉토리에서

의 압축을 풀고 불필요한 항목을 삭제하고 iconfont.js 파일

만 남겨둔 다음 main.ts

import './assets/svg/iconfont.js'

-icon

에서 전역적으로 svg를 가져옵니다.

에서는 src 디렉토리, 플러그인 저장을 위한 디렉토리 생성 plugin

// index.vue

<template>
  <svg>
    <use></use>
  </svg>
</template>

<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  iconName: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: &#39;&#39;
  },
  color: {
    type: String,
    default: &#39;#409eff&#39;
  }
})
// 图标在 iconfont 中的名字
const iconClassName = computed(() => {
  return `#${props.iconName}`
})
// 给图标添加上类名
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`
  }
  return &#39;svg-icon&#39;
})
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>

// index.ts

import { App } from 'vue'

import SvgIcon from './index.vue'

export function setupSvgIcon(app: App) {
  app.component('SvgIcon', SvgIcon)
}

그런 다음 main.ts에

import { setupSvgIcon } from './plugin/SvgIcon/index'
setupSvgIcon(app)

컴포넌트를 등록하고 페이지에서 사용하는

<template>
  <div> 工作台页面 </div>

  <svg-icon></svg-icon>
</template>

을 볼 수 있습니다. SVG 아이콘이 성공적으로 표시되었습니다

Summary

Express-Mysql-Vue3-TS-Pinia System 프로젝트

를 통해

SVG 아이콘을 프로젝트에 추가하세요.

【관련 추천:

vuejs 입문 튜토리얼】

위 내용은 Vue3 프로젝트에 SVG 아이콘을 도입하는 방법을 자세히 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!