創(chuàng)新互聯(lián)公司是一家專業(yè)提供安定企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、H5頁(yè)面制作、小程序制作等業(yè)務(wù)。10年已為安定眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

在考慮了將矢量圖標(biāo)從圖標(biāo)字體遷移到內(nèi)聯(lián) SVG 的 原因 之后，我在 Vue.js 中找到了一個(gè)用 SVG 替換圖標(biāo)字體的解決方案，同時(shí)仍能保持使用圖標(biāo)字體的靈活性和易用性——能夠使用 CSS 輕松改變圖標(biāo)的大小、顏色以及其它屬性。

一種流行的方法是使用 v-html 指令和 npm 模塊 html-loader 來將 SVG 導(dǎo)入到我們的 Vue 模板中，并在 Vue 的生命周期函數(shù) mounted() 中修改渲染的

創(chuàng)建 Svg-icon 組件

讓我們創(chuàng)建 Svg-icon.vue 組件文件，并在里面接收三個(gè) prop 變量。

• icon 是一個(gè)字符串類型的 prop 變量用來傳遞 .svg 文件名的導(dǎo)入
• hasFill 是一個(gè)布爾類型的 prop 變量來告訴組件 fill 屬性是否用于更改
• growByHeight 是一個(gè)布爾類型的 prop 變量來決定 height 或 width 是否相對(duì)于 font-size 進(jìn)行縮放，默認(rèn)值為 true 即使用 height

我們將 .svg 圖標(biāo)文件通過 require() 傳遞給 html-loader 方法，該方法會(huì)將文件字符串化，并且通過 v-html 指令將其渲染為

所有對(duì)

• 將由 growByHeight 定義的
• 為了設(shè)置
• 還可以向元素中添加例如 class 等其它 DOM 屬性，這些屬性可用于設(shè)置組件中的范圍樣式

創(chuàng)建微笑圖標(biāo)

讓我們使用 Font Awesome 和我們的 Svg-icon 組件中的圖標(biāo)字體創(chuàng)建一個(gè)微笑圖標(biāo)。

使用圖標(biāo)字體

.smile-icon 類的 CSS 選擇器以及偽類選擇器 :hover 來設(shè)置圖標(biāo)的 font-size 和 color 屬性。

使用 Svg-icon 組件

上面的實(shí)現(xiàn)和圖標(biāo)字體方法相同，除了 .smile-icon 類在父元素中，在 Svg-icon 組件中， color 屬性被替換為 fill 。我們還必須確保 smile-solid.svg 文件位于 Svg-icon 組件的 require() 方法指定的路徑（ ./assets/svg/ ）中。

渲染成 HTML

這是由 v-html 的輸出渲染的 HTML。注意：會(huì)刪除掉所有的 fill 屬性，并將 height 和 width 屬性添加到

過渡到 SVG

由于 SVG 被認(rèn)為是未來的發(fā)展方向，因此最好是在保留圖標(biāo)字體的易用性的基礎(chǔ)上，逐步放棄使用圖標(biāo)字體。 Svg-icon 組件是一個(gè)例子，告訴了我們?nèi)绾问褂每捎玫膸?kù)來抽離出

總結(jié)

到此這篇關(guān)于在 Vue 中編寫 SVG 圖標(biāo)組件的文章就介紹到這了,更多相關(guān)vue SVG 圖標(biāo)組件內(nèi)容請(qǐng)搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！