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

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

#はじめに

これまでの学習期間を通して

Express と Mysql

ここでは、学習テクノロジーを統合するための

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

SVG アイコン

これはページであるため、いくつかのアイコンと分離できない必要があります

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

ここでは、

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

Alibaba アイコン ライブラリ

ページに入り、

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

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

Ali のマテリアル ライブラリ

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

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

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

しかし、今は見つかりません。ローカルにダウンロードして使用する必要があります = =

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

シンボル

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

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

次に、コンポーネントを main.ts

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

に登録します。#

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

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

SVG

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

Summary

ThroughExpress

-

Mysql-Vue3

-

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

]

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