您好,登錄后才能下訂單哦!
今天小編給大家分享一下vue3怎么使用svg圖標(biāo)的相關(guān)知識點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
在iconfont找到自己的項(xiàng)目的圖標(biāo)選擇Symbol獲取在線鏈接
2:在vue3項(xiàng)目中找到public的index.html進(jìn)行script進(jìn)行引入
打開瀏覽器看:這樣就會自動(dòng)注入到body下
在項(xiàng)目直接使用
//控制圖標(biāo)的大小 <svg > <use href="#icon-shanchu" rel="external nofollow" ></use> </svg>
顯示出了刪除的圖標(biāo)
1:新建一個(gè)專門獲取svg圖標(biāo)的組件
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>
需要顯示圖標(biāo)的界面
<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>
假如你既引用了iconfont的圖標(biāo)也自定義了圖標(biāo):直接放在一起根據(jù)傳輸?shù)膎ame指定使用哪一個(gè)圖標(biāo)
icon.vue (svg/index.vue)
<template> <div> <svg :> <use :href="names" rel="external nofollow" rel="external nofollow" ></use> </svg> // 自定義的圖標(biāo) <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>
使用:
<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>
假如你是復(fù)制的iconfont官網(wǎng)的圖標(biāo)svg的代碼:
你直接cv到項(xiàng)目也可以直接使用:
<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>
效果如下:
我們還可以把上面的代碼進(jìn)行改造直接使用在 icon.vue (svg/index.vue)改造
<template> <div class="home"> <icon : name="icon-shanchu" ></icon> <icon : name="icon-shanchu1" ></icon> <icon : name="more"></icon> <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> //改造好了直接使用 <icon : name="icon"></icon> </div> </template> <script setup> import { ref } from "vue"; import icon from "../assets/svg/index.vue"; </script> <style lang="scss"> </style>
以上就是“vue3怎么使用svg圖標(biāo)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。