Vue3プロジェクトにSVGアイコンを導入する方法を詳しく解説した記事

SVG アイコンを Vue3 プロジェクトに導入するにはどうすればよいですか?次の記事では、Vue3 プロジェクトに iconfont アイコンを導入する方法を紹介しますので、ご参考になれば幸いです。

#はじめに

Express と Mysql

バックエンド システムを構築してみます。

SVG アイコン

icon。そのため、必ず最も完全なアイコンに移動してください。 Alibaba アイコン ライブラリ を見つけます

Alibaba アイコン ライブラリのコンテンツをページに配置する方法を説明します

Alibaba アイコン ライブラリ

My Project の下にある Resource Management を見つけて、プロジェクト ## を作成します# 設定は次のとおりです。

プロジェクトを作成した後、

に入り、後で必要なアイコンをいくつか見つけます。追加します ショッピング カート に移動し、

ショッピング カート のアイコンをプロジェクトに追加します

#前にオンラインアイコンのリンクアドレスがありますのでご紹介します。

その後、プロジェクト内のアイコンを選択し、

と # を選択するだけです。 ## ローカルにダウンロードします。

src\assets\svg ディレクトリに置きます。

解凍して不要なものを削除します。 iconfont.js

をそのままにして、それを main.ts

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

にグローバルにインポートします。 プロジェクトに svg-icon を導入します

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

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

に登録します。#

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

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

アイコンが正常に表示されたことがわかります。

Summary

ThroughExpress

Mysql-Vue3

TS-Pinia バックエンド システム プロジェクトAlibaba を導入する SVG アイコンをプロジェクトに追加します。 [関連する推奨事項: vuejs 入門チュートリアル

以上がVue3プロジェクトにSVGアイコンを導入する方法を詳しく解説した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。