vue3使用svg圖標的多種方式總結
更新時間：2023年03月24日 09:49:30 作者：@小朱呀路
svg圖片在項目中使用的非常廣泛,下面這篇文章主要給大家介紹了關于vue3使用svg圖標的多種方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
方式1使用在線鏈接訪問
在iconfont找到自己的項目的圖標選擇Symbol獲取在線鏈接
2：在vue3項目中找到public的index.html進行script進行引入
打開瀏覽器看：這樣就會自動注入到body下
在項目直接使用
//控制圖標的大小
<svg style="width: 10px; height: 10px">
<use href="#icon-shanchu" rel="external nofollow" ></use>
</svg>
顯示出了刪除的圖標
封裝的寫法(上面的代碼寫著太重復下面進行封裝)
1:新建一個專門獲取svg圖標的組件
icon.vue (svg/index.vue)
<template>
<div>
<svg :style="style">
<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>需要顯示圖標的界面
<template>
<div class="home">
<icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu" ></icon>
<icon :style="{ width: 10, height: 10, color: 'red' }" 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的圖標也自定義了圖標：直接放在一起根據(jù)傳輸?shù)膎ame指定使用哪一個圖標
icon.vue (svg/index.vue)
<template>
<div>
<svg :style="style">
<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>使用：
<template>
<div class="home">
<icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu" ></icon>
<icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu1" ></icon>
<icon :style="{ width: 20, height: 20, color: 'red' }" name="more"></icon>
</div>
</template>
<script setup>
import { ref } from "vue";
import icon from "../assets/svg/index.vue";
</script>
<style lang="scss">
</style>
假如你是復制的iconfont官網(wǎng)的圖標svg的代碼：
你直接cv到項目也可以直接使用：
<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.vue (svg/index.vue)改造
<template>
<div class="home">
<icon
:style="{ width: 10, height: 10, color: 'red' }"
name="icon-shanchu"
></icon>
<icon
:style="{ width: 10, height: 10, color: 'red' }"
name="icon-shanchu1"
></icon>
<icon :style="{ width: 20, height: 20, color: 'red' }" 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 :style="{ width: 20, height: 20, color: 'red' }" 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圖標的多種方式總結的文章就介紹到這了,更多相關vue3使用svg圖標內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項2022-08-08
Day.js庫本身專注于簡化JavaScript日期和時間的操作,它的API設計直觀,且功能強大,可以方便地格式化日期、添加或減去時間間隔、比較日期等,本文主要介紹了Vue利用dayjs封裝實現(xiàn)時間實時刷新,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue中如何去掉input前后的空格問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了解決Vue項目中tff報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue中子組件如何間接修改父組件傳遞過來的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了如何使用crypto-js對文件上傳下載進行加密處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了如何解決公共組件父子組件依賴調用和子組件校驗父組件條件的問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要給大家介紹了關于axios如何取消重復無用的請求的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用axios具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
VUE項目啟動沒有問題但代碼中script標簽有藍色波浪線標注
這篇文章主要給大家介紹了關于VUE項目啟動沒有問題但代碼中script標簽有藍色波浪線標注的相關資料,文中將遇到的問題以及解決的方法介紹的非常詳細,需要的朋友可以參考下2023-05-05
前端項目vue3/React如何使用pako庫解壓縮后端返回gzip數(shù)據(jù)
pako是一個流行的JS庫,用于在瀏覽器中進行數(shù)據(jù)壓縮和解壓縮操作,它提供了對常見的壓縮算法的實現(xiàn),使開發(fā)者能夠在客戶端上輕松進行數(shù)據(jù)壓縮和解壓縮,這篇文章主要介紹了前端項目vue3/React使用pako庫解壓縮后端返回gzip數(shù)據(jù),需要的朋友可以參考下2024-07-07