Table of Contents
Method 1 Use online link to access
How to write the package (the above code is too repetitive to encapsulate below)
Home Web Front-end Vue.js How to use svg icon in vue3

How to use svg icon in vue3

May 17, 2023 pm 04:52 PM
svg vue3

Find the icon of your project in iconfont and select Symbol to get the online link

How to use svg icon in vue3

2: Found in vue3 project Public index.html introduces script

How to use svg icon in vue3

#Open the browser to see: This will automatically inject it into the body

How to use svg icon in vue3

Use directly in the project

   //控制图标的大小
   <svg >
      <use href="#icon-shanchu" rel="external nofollow" ></use>
    </svg>
Copy after login

The deleted icon is displayed

How to use svg icon in vue3

How to write the package (the above code is too repetitive to encapsulate below)

1: Create a new component specifically to get the svg icon

How to use svg icon in vue3

icon.vue (svg/index.vue)

 <template>
  <div>
    <svg :>
      <use :href="names" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
  </div>
</template>

<script setup>
import { defineProps, withDefaults } from "vue";
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  style: {
    type: Object,
    default: () => {
      return {
        width: 10,
        height: 10,
        color: "",
      };
    },
  },
});
const names = `#${props.name}`;
</script>

<style lang="scss" scoped></style>
Copy after login

Interface that needs to display icons

<template>
  <div class="home"> 
    <icon   :  name="icon-shanchu"  ></icon>
    <icon   :  name="icon-shanchu"  ></icon>
  </div>
</template>

<script setup>
import { ref } from "vue";
import icon from "../assets/svg/index.vue";
</script>
<style lang="scss">
 
</style>
Copy after login

How to use svg icon in vue3

If you use iconfont icons and custom icons, you can put them together and specify which icon to use based on the transferred name

icon.vue (svg/index .vue)

<template>
  <div>
    <svg :>
      <use :href="names" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
   // 自定义的图标
    <svg width="0" height="0">
      <defs>
        <symbol id="more" viewBox="0 0 100 100">
          <circle
            r="5"
            cx="20"
            cy="25"
            fill="transparent"
            stroke="green"
          ></circle>
          <circle r="5" cx="20" cy="50" fill="currentColor"></circle>
          <circle r="5" cx="20" cy="75" fill="currentColor"></circle>
          <line
            x1="40"
            y1="25"
            x2="90"
            y2="25"
            stroke-width="8"
            stroke="currentColor"
          ></line>
          <line
            x1="40"
            y1="50"
            x2="90"
            y2="50"
            stroke-width="8"
            stroke="currentColor"
          ></line>
          <line
            x1="40"
            y1="75"
            x2="90"
            y2="75"
            stroke-width="8"
            stroke="currentColor"
          ></line>
        </symbol>  
      </defs>
    </svg>
  </div>
</template>

<script setup>
import { defineProps, withDefaults } from "vue";
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  style: {
    type: Object,
    default: () => {
      return {
        width: 10,
        height: 10,
        color: "",
      };
    },
  },
});
const names = `#${props.name}`;
</script>

<style lang="scss" scoped></style>
Copy after login

Use:

<template>
  <div class="home"> 
    <icon  :   name="icon-shanchu" ></icon>
    <icon  :  name="icon-shanchu1"  ></icon>
    <icon : name="more"></icon>
  </div>
</template>

<script setup>
import { ref } from "vue";
import icon from "../assets/svg/index.vue";
</script>
<style lang="scss">
 
</style>
Copy after login

How to use svg icon in vue3

##If you copy the icon svg code of the iconfont official website:

How to use svg icon in vue3

How to use svg icon in vue3

You can directly cv to the project or use it directly:

<svg
      t="1673881805558"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="1076"
      width="200"
      height="200"
    >
      <path
        d="M658.276045 767.993958 658.276045 274.295l329.126 0L987.402045 219.44 658.276 219.44l0-18.281c0-80.787046-65.492992-146.284032-146.276045-146.284032-80.790016 0-146.276045 65.496986-146.276045 146.284032l0 18.281L36.597 219.44l0 54.855 109.695 0 0 694.83L877.7 969.125l0-548.55-54.855 0L822.845 914.27l-621.69 0L201.155 274.295l164.569 0 0 493.699 54.848 0L420.572 274.295l182.85 0 0 493.699L658.276 767.994zM420.571034 219.440026l0-18.281c0-50.492006 40.932966-91.420979 91.428966-91.420979 50.489037 0 91.420979 40.928973 91.420979 91.420979l0 18.281L420.571 219.440026z"
        p-id="1077"
      ></path>
    </svg>
Copy after login

The effect is as follows:

How to use svg icon in vue3

We can also transform the above code and use it directly in icon.vue (svg/index.vue) transformation

How to use svg icon in vue3

 


Copy after login

How to use svg icon in vue3

The above is the detailed content of How to use svg icon in vue3. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Two Point Museum: All Exhibits And Where To Find Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

vue3+vite: How to solve the error when using require to dynamically import images in src vue3+vite: How to solve the error when using require to dynamically import images in src May 21, 2023 pm 03:16 PM

vue3+vite:src uses require to dynamically import images and error reports and solutions. vue3+vite dynamically imports multiple images. If vue3 is using typescript development, require will introduce image errors. requireisnotdefined cannot be used like vue2 such as imgUrl:require(' .../assets/test.png') is imported because typescript does not support require, so import is used. Here is how to solve it: use awaitimport

How to use tinymce in vue3 project How to use tinymce in vue3 project May 19, 2023 pm 08:40 PM

tinymce is a fully functional rich text editor plug-in, but introducing tinymce into vue is not as smooth as other Vue rich text plug-ins. tinymce itself is not suitable for Vue, and @tinymce/tinymce-vue needs to be introduced, and It is a foreign rich text plug-in and has not passed the Chinese version. You need to download the translation package from its official website (you may need to bypass the firewall). 1. Install related dependencies npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. Download the Chinese package 3. Introduce the skin and Chinese package. Create a new tinymce folder in the project public folder and download the

How Vue3 parses markdown and implements code highlighting How Vue3 parses markdown and implements code highlighting May 20, 2023 pm 04:16 PM

Vue implements the blog front-end and needs to implement markdown parsing. If there is code, it needs to implement code highlighting. There are many markdown parsing libraries for Vue, such as markdown-it, vue-markdown-loader, marked, vue-markdown, etc. These libraries are all very similar. Marked is used here, and highlight.js is used as the code highlighting library. The specific implementation steps are as follows: 1. Install dependent libraries. Open the command window under the vue project and enter the following command npminstallmarked-save//marked to convert markdown into htmlnpmins

How to refresh partial content of the page in Vue3 How to refresh partial content of the page in Vue3 May 26, 2023 pm 05:31 PM

To achieve partial refresh of the page, we only need to implement the re-rendering of the local component (dom). In Vue, the easiest way to achieve this effect is to use the v-if directive. In Vue2, in addition to using the v-if instruction to re-render the local dom, we can also create a new blank component. When we need to refresh the local page, jump to this blank component page, and then jump back in the beforeRouteEnter guard in the blank component. original page. As shown in the figure below, how to click the refresh button in Vue3.X to reload the DOM within the red box and display the corresponding loading status. Since the guard in the component in the scriptsetup syntax in Vue3.X only has o

How to use Vue3 reusable components How to use Vue3 reusable components May 20, 2023 pm 07:25 PM

Preface Whether it is vue or react, when we encounter multiple repeated codes, we will think about how to reuse these codes instead of filling a file with a bunch of redundant codes. In fact, both vue and react can achieve reuse by extracting components, but if you encounter some small code fragments and you don’t want to extract another file, in comparison, react can be used in the same Declare the corresponding widget in the file, or implement it through renderfunction, such as: constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

How to use defineCustomElement to define components in Vue3 How to use defineCustomElement to define components in Vue3 May 28, 2023 am 11:29 AM

Using Vue to build custom elements WebComponents is a collective name for a set of web native APIs that allow developers to create reusable custom elements (customelements). The main benefit of custom elements is that they can be used with any framework, even without one. They are ideal when you are targeting end users who may be using a different front-end technology stack, or when you want to decouple the final application from the implementation details of the components it uses. Vue and WebComponents are complementary technologies, and Vue provides excellent support for using and creating custom elements. You can integrate custom elements into existing Vue applications, or use Vue to build

How to select an avatar and crop it in Vue3 How to select an avatar and crop it in Vue3 May 29, 2023 am 10:22 AM

The final effect is to install the VueCropper component yarnaddvue-cropper@next. The above installation value is for Vue3. If it is Vue2 or you want to use other methods to reference, please visit its official npm address: official tutorial. It is also very simple to reference and use it in a component. You only need to introduce the corresponding component and its style file. I do not reference it globally here, but only introduce import{userInfoByRequest}from'../js/api' in my component file. import{VueCropper}from'vue-cropper&

How to encapsulate ECharts components in vue3 How to encapsulate ECharts components in vue3 May 20, 2023 pm 03:22 PM

1. Preface Front-end development often needs to use ECharts charts to render data information. In a project, we often need to use multiple charts. Choosing to encapsulate ECharts components for reuse can reduce the amount of code and increase development efficiency. 2. Encapsulating ECharts components Why should we encapsulate components to avoid duplication of workload, improve reusability, make the code logic clearer, and facilitate the later maintenance of the project? Encapsulating components can prevent users from caring about the internal implementation and principles of the components, and can enable a team to Better and hierarchical operation of the encapsulated ECharts component implements the following functions: Use the component to pass the option attribute in ECharts Manually/automatically set the chart size Chart adaptive width and height dynamic display

See all articles