手摸手,帶你優雅的使用 icon

2021-10-08 21:59:30 字數 809 閱讀 3105

這是花褲衩在掘金上發布的關於這個優雅的使用icon的過程

這是關於如何自己封裝乙個元件上傳npm庫

久在vue後台管理系統混跡的童鞋應該知道花褲衩的吧,我用了他的vue-admin-template模板,順便學習了一下大佬的**,裡面有乙個使用svg-icon的元件,認真看了下,因為我一般用的都是阿里爸爸iconfont官方的那種使用方式,都知道的,看人家模板是怎麼用的,原理去大佬掘金的文章上看:

首先寫乙個svg-icon元件:

import vue from 'vue'

import svgicon from '@/components/svgicon'// svg component

// register globally

vue.component('svg-icon', svgicon)

const req = require.context('./svg', false, /\.svg$/) // 這裡./svg是存放你的svg格式的icon的資料夾

const requireall = requirecontext => requirecontext.keys().map(requirecontext)

requireall(req)

然後使用:

//  這個icon-class="man",man就是你要用的svg的名字

手摸手,帶你實現移動端H5瀑布流布局

移動端瀑布流布局是一種比較流行的網頁布局方式,視覺上來看就是一種像瀑布一樣垂直落下的排版。每張並不是顯示的正正方方的,而是有的長有的短,呈現出一種不規則的形狀。但是它們的寬度通常都是相同的 因為移動端瀑布流布局主要為豎向瀑布流,因此本文所 的是豎向瀑布流 豎向瀑布流布局主要有下面幾種特點 不同於傳統...

手摸手教你如何使用npm發布vue外掛程式

有兩種方式 build lib vue cli service build target lib name image ipreview dest lib src index.js 下面介紹下命令中的幾個部分。target lib target有好幾個選項。這裡是打包成乙個庫 lib 發布外掛程式的...

icon在專案中的使用

將icons資料夾放在src目錄下方 svg資料夾裡面都是一些svg檔案 index.js裡面則是配備的前端工程化js檔案 import vue from vue import svgicon from c svgicon vue.component svg icon svgicon const r...