current position:Home>Icons using Alibaba vector icon library in Vue

Icons using Alibaba vector icon library in Vue

2022-04-29 04:05:09fresh_ nam


Preface

vue In general use element-ui And other frameworks to build page styles , But sometimes the icons inside can't meet our needs , and Alibaba vector icon library There are a lot of icons in it , Now let's learn how to introduce icons .


One 、 To configure

vue 2.x edition

Two 、 Use steps

1. Download Icon

Go to the official website of Alibaba vector icon library to download icons ( Suggest : When downloading, first click the small shopping cart to add it to the library , Then click the small shopping cart in the upper right corner to add all the icons to a library and download them together
 Insert picture description here
 Insert picture description here

2. Use

1. decompression

After downloading , Decompress the package , You will see the following file , Among them demo_index.html Tutorial files , You can open it and view it in the browser
 Insert picture description here
After that, except demo All files other than files are imported into vue In the project ( Position at will , Just find it )
 Insert picture description here

2. Introduce and use

Because I want color icons , So follow the tutorial to use svg Way to introduce , First , stay index.html Introduction in iconfont.js
index.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <!--  Add this sentence  -->
  <script src="./icon/iconfont.js"></script>
  <!--  Add this sentence  -->
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

And then in the corresponding vue Add... To the file style, And write the corresponding html The code can be

<template>
  <div>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-caozhiwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-lvsedeshumuzhiwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-huahuaduozhiwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-guoshushuzhiwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-meiguihuahuahuaduozhiwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-shuiguoguoshi"></use>
    </svg>
  </div>
</template>

<script> export default {
      }; </script>

<style> .icon {
       width: 10em; /*  Adjust icon width  */ height: 10em; /*  Adjust icon height  */ vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>

3. result

 Insert picture description here
Be accomplished ! If you have any questions, please leave a message in the comment area .

copyright notice
author[fresh_ nam],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/118/202204280602490727.html

Random recommended