So verwenden Sie Schriftsymbole und SVG-Symbole in Vue-Dokumenten

Mit der Entwicklung der Front-End-Technologie beginnen immer mehr Websites, Symbole zu verwenden, um das Benutzererlebnis und die Ästhetik der Benutzeroberfläche zu verbessern. Im Vue-Framework können wir Schriftartensymbole und SVG-Symbole verwenden, um diesen Zweck zu erreichen. In diesem Artikel wird erläutert, wie Sie beide Symbole verwenden.

1. Schriftsymbol

Font-Symbol dient dazu, das Symbol in eine Schriftartdatei umzuwandeln und über die Schriftart auf das Symbol zu verweisen. Schriftartsymbole haben die folgenden Vorteile:

1. können nach Bedarf geändert werden;
2. werden mehrfarbige Symbole unterstützt;
3. wird über Unicode referenziert, was einfach zu verwenden ist.
4. Font-awesome ist in der offiziellen Dokumentation von Vue.js vorinstalliert und wir können die Symbole in dieser Bibliothek direkt verwenden.

Fügen Sie FontAwesome-Schriftartendateien in die Komponente ein: (In-App-Methode, empfohlen)

1. In der Komponente können wir den Import verwenden, um Schriftartendateien einzuführen.

import 'font-awesome/css/font-awesome.min.css'

Schriftsymbole in Vorlagen verwenden: import 'font-awesome/css/font-awesome.min.css'

2. 在模板中使用字体图标：

<i class="fa fa-address-card"></i>

fa代表font-awesome，fa-address-card代表这个图标的名称。

3. 在JS中使用字体图标：

我们可以通过Icon组件把FontAwesome失去用，而不是直接使用标签。

首先，我们需要下载vue-awesome这个库，并在组件中引入。

import Icon from 'vue-awesome/components/Icon'   
Vue.component('icon', Icon)```

然后，我们就可以在JS中使用字体图标了。

```<icon name="address-card" />```

``name``代表FontAwesome中该图标的名称。

二、SVG图标

SVG是一种计算机矢量图形标准，所有SVG图形都是可伸缩的。使用SVG图标的优点：

1. 缩放不会失真；
2. 着色不会失真；
3. 不需要载入一个完整的字体集合。

在Vue.js中，我们可以使用如下库来引入SVG图标：

1. SVG-Loader

首先，我们需要安装svg-loader这个库：

```npm install svg-loader --save-dev```

然后，在webpack.config.js文件的rules加入相应的Loader：

```{test: /.svg/, loader: 'svg-loader'} ```

最后，在组件中使用SVG图标：

<img src="./assets/my-svg.svg" alt="My SVG">


`
2. vue-svgicon

vue-svgicon是一个Vue.js插件，用于将.svg文件转换为Vue.js组件，以便于在.vue文件中直接使用SVG图标。使用vue-svgicon的步骤如下：

第一步：安装vue-svgicon

npm install vue-svgicon -D

第二步：创建SVG图标

在项目根目录的icons目录中，创建一个文件my-icon.svg。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M12 18h8v-8h8v-8h-16v16zM26 18h8v-8h-8v-8h-8v16zM4 30h8v-8h8v-8h-16v16zM18 30h8v-8h-8v-8h-8v16zM32 30h8v-8h-8v-8h-8v16z"/></svg>

第三步：生成Vue组件

在根目录创建一个.vue组件my-icon.vue，用于引用my-icon.svg：

  <svg viewBox="0 0 48 48">
    <use xlink:href="#my-icon" />
  </svg>
</template>

<script>
import SvgIcon from 'vue-svgicon'

const req = require.context('@/icons', false, /.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

SvgIcon.register(require.context('@/icons', false, /.svg$/))

export default {
  name: 'my-icon'
}
</script>```

第四步：在.vue文件中使用SVG图标


`

icon-class

< class="fa fa-address-card"></i>

fa steht für „font-awesome“, fa-address-card steht für den Namen dieses Symbols.

Verwenden von Schriftartsymbolen in JS:

🎜🎜Wir können FontAwesome über die Symbolkomponente deaktivieren, anstatt das -Tag direkt zu verwenden. 🎜🎜Zuerst müssen wir die vue-awesome-Bibliothek herunterladen und in die Komponente einführen. 🎜rrreee🎜
🎜rrreee🎜

`🎜
🎜vue-svgicon🎜🎜🎜vue-svgicon Ist ein Vue.js-Plug-in zum Konvertieren von .svg-Dateien in Vue.js-Komponenten, sodass SVG-Symbole direkt in .vue-Dateien verwendet werden können. Die Schritte zur Verwendung von vue-svgicon sind wie folgt: 🎜🎜Schritt 1: vue-svgicon installieren🎜🎜npm install vue-svgicon -D🎜🎜Schritt 2: Erstellen Sie ein SVG-Symbol🎜🎜im Projekt Stammverzeichnis Erstellen Sie im Symbolverzeichnis eine Datei my-icon.svg. 🎜🎜<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M12 18h8v-8h8v-8h-16v16zM26 18h8v -8h-8v-8h-8v16zM4 30h8v-8h8v-8h-16v16zM18 30h8v-8h-8v-8h-8v16zM32 30h8v-8h-8v-8h-8v16z"/></svg>🎜🎜Dritter Schritt : Vue-Komponente generieren 🎜🎜Erstellen Sie eine .vue-Komponente my-icon.vue im Stammverzeichnis, um auf my-icon.svg zu verweisen: 🎜rrreee🎜
`🎜🎜icon-class stellt den Namen der generierten SVG-Komponente dar. 🎜🎜Es ist bequemer, SVG-Loader und vue-svgicon zu verwenden. Bei der tatsächlichen Arbeit können Sie je nach Bedarf eines davon auswählen und SVG-Symbole in Vue.js verwenden. 🎜🎜Zusammenfassung: 🎜🎜In diesem Artikel wird kurz die Verwendung von Schriftartsymbolen und SVG-Symbolen im Vue-Framework vorgestellt. Bei der Frontend-Entwicklung kann die Verwendung von Symbolen das Benutzererlebnis verbessern und die Ästhetik der Anwendung verbessern. Sie bietet viele Vorteile für die Verbesserung der Interaktivität und des Benutzererlebnisses der Website. Die Verwendung von Schriftsymbolen und SVG-Symbolen ist eine gängige Methode im modernen Webentwicklungsprozess und Sie können je nach tatsächlichem Bedarf auswählen. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Schriftsymbole und SVG-Symbole in Vue-Dokumenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!