Comment utiliser les icônes de police et les icônes SVG dans les documents Vue-Voir.js-php.cn

Comment utiliser les icônes de police et les icônes SVG dans les documents Vue

王林

Libérer： 2023-06-20 09:11:23

original

2216 Les gens l'ont consulté

Avec le développement de la technologie front-end, de plus en plus de sites Web commencent à utiliser des icônes pour améliorer l'expérience utilisateur et l'esthétique de l'interface. Dans le framework Vue, nous pouvons utiliser des icônes de police et des icônes SVG pour atteindre cet objectif. Cet article explique comment utiliser ces deux icônes.

1. Icône de police

L'icône de police consiste à transformer l'icône en fichier de police et à référencer l'icône via la police. Les icônes de police présentent les avantages suivants :

peuvent être redimensionnées selon les besoins ;
ne seront pas déformées ;
prend en charge plusieurs couleurs ; L'icône
est référencée via Unicode pour faciliter l'utilisation.

La documentation officielle de Vue.js a font-awesome préinstallé, et nous pouvons utiliser directement les icônes de cette bibliothèque.

Introduire le fichier de police FontAwesome dans le composant : (Méthode intégrée à l'application, recommandée)

Dans le composant, nous pouvons utiliser l'importation pour introduire fichier de police.

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

在模板中使用字体图标：

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

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

在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图标：

Copier après la connexion

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

Copier après la connexion

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图标

Copier après la connexion

icon-class

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

#🎜🎜#rrreee#🎜🎜#

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M12 18h8v- /></svg >#🎜🎜##🎜🎜#Étape 3 : Générer le composant Vue#🎜🎜##🎜🎜#Créer un composant .vue my-icon.vue dans le répertoire racine pour référencer my-icon.svg : #🎜 🎜 #rrreee#🎜🎜#<mon-icône icon-class="mon-icône" class="icône"></mon-icône><br></template><code>`

icon-class

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!