整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
隨著Vue的誕生，它似乎就被人寄予厚望，不僅僅是因為其輕量級的MVVM設計方式，而且其實現了組件化開發模式，所以越來越多的人會拿Vue和AngularJS、React Native做比較。具體關于它們的比較，我不做過多描述，使用哪個應該根據使用場景出發。
Vue.js
最近，因為有業務需要使用Vue去開發，所以我們需要自己封裝出Vue.js的各種常用組件。今天就給大家介紹一下我封裝Vue的icon組件的過程。當然這篇文章不是Vue.js，Webpack類的基礎教學課程，而是在大家有些基礎的情況下去看的。所以文章中只介紹了部分重點的代碼，以及代碼的截圖，如果有不大能看懂的地方可以先學下Vue和webpack的基礎。如果真的有需要可以在評論處評論，我可以出些Vue，Gulp，Webpack等基礎文章。
icon組件外觀
首先我們看一下icon組件運行出來后的模樣
icon組件
icon組件實現過程
項目搭建
icon組件實現后是一個可以直接使用的npm包，使用的是Yeoman構建工具，配和Gulp+Webpack，生成的工作目錄結構如下
目錄結構
（1）config文件夾下是webpack的配置文件
（2）src下是Vue組件的源文件
（3）example文件夾下是示例，剛看到的截圖就是example文件夾下的文件運行后的樣子
icon源文件編寫
項目結構生成好后，編寫icon組件的源文件就是最重要的了。
icon組件是一個.vue文件，其中包含template，style和script。
我實現的icon組件樣式是借助于ionicons，所以要借助于ionicons的樣式文件，因此會有以下的代碼
引入ionicons的樣式
然后考慮icon組件應該具備的幾項屬性，一個是樣式，利用type變量去控制；一個是顏色，利用color變量去控制；一個是大小，利用size變量去控制。所以template中有以下代碼
template代碼
在script中有以下代碼
script代碼
同時預先定義好icon組件大中小的幾個樣式，因此在style中會有以下代碼
style代碼
至此icon組件的源碼編寫就結束了，但并不是整個工程就結束了，需要對webpack進行設置，而這也是最重要的部分。
因為我們在icon組件的源碼中引入了ionicons的樣式，所以需要在webpack的配置文件中加入對css文件的解析loader，而css文件中又會引入woff，svg等文件，因此又要加入對這些文件的解析loader，如果不加入的對css，tff，svg等文件解析的話會報錯。
在webpack.base.js文件中加入以下代碼
webpack的配置
樣例的訪問
在源文件和webpack配置好后，就可以通過在example文件夾下寫demo了。
在demo.vue文件中，使用<icon>標簽即可訪問到自定義的icon組件
icon組件的例子
通過type，size，color三個參數來定義我們需要的icon組件的樣式，運行出來后的例子就如一開始運行出來的一樣，是不是很好看呢？
總結
Vue的組件還有很多，例如form表單類的，View視圖類，Navigation導航類等，都需要一個個去編寫，不過只要我們搞懂Vue的運行模式和Webpack的編譯模式就可以很方便的寫出來了。
如果喜歡的話，記得關注小編噢，小編后續會堅持出更多技術性的文章，如果有任何問題，也歡迎提問，小編都會盡力解答的。
前端的開發過程中，需要用到大量的圖片，當使用這些圖片一段時間后，會發現這個過程是千篇一律的，設計，切圖，適配。當然，許多人也喜歡用字體圖標。時間久了，這很枯燥，作為一個前端，不就是喜歡折騰嗎？不折騰不舒服斯基，那么這次就來嘗試用純css繪制動畫線性icon吧。
當我第一次使用純css線性icon的時候，那感覺就像呼吸到了新鮮空氣一般，它的高可擴展性、易使用、加載速度快的特定給我留下了非常深刻的印象。
線性圖標使用了什么技術呢？
其實很容易猜到，它使用了svg技術。整個開始過程其實是把svg放到一個背景中，然后用一張線性漸變的背景覆蓋在上方，然后使用css的mix-blend-mode的屬性來裁剪、混合。最后線性漸變背景的混合模式設置為mix-blend-mode: screen后，線性漸變會漸漸消失在白色背景上。這就形成了我們的漸變圖標。
下面是具體的代碼實現：
一、編寫背景樣式
背景圖可以是亮的或是暗的，如果是暗背景，那漸變層需要設置mix-blend-mode: multiply，如果背景圖是亮的，那漸變的混合屬性需要設置為mix-blend-mode:screen，下面，我們選擇一個亮的背景：
二、添加線性圖標
<divclass="icon-background"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 50 62"><rectx="19"y="6"width="12"height="4"/><rectx="1"y="38"width="48"height="4"/><linex1="25"y1="1"x2="25"y2="6"/><linex1="25"y1="42"x2="25"y2="58"/><lineclass="cls-1"x1="38"y1="42"x2="44"y2="61"/><linex1="12"y1="42"x2="6"y2="61"/><linex1="8.53"y1="53"x2="41.47"y2="53"/><polygonpoints="3 38 16.75 25.99 24.59 31.99 36.92 20 47 29.82 47 37.98 3 38"/><circlecx="14"cy="18"r="3"/><polygonpoints="31 8 31 10 19 10 19 8 3 8 3 38 47 38 47 8 31 8"/></svg></div>
svg的顏色需要設置為黑色：
svg{ color:#000; position:relative; opacity:.9; width:100%; height:100%; display:block; transition:transform .3s ease;}三、制作漸變層
該層需要緊跟著icon層，并且需要設置漸變屬性
四、添加動畫效果
該步驟非常簡單，只要使用keyframes并配以旋轉動畫即可。
Vue3 已切換到默認版本，現在新做的項目基本都直接用 Vue3 了， 但是升級到 Element Plus 后很多人都感覺 icon 的使用方式不習慣、不好用，今天就跟大家分享一個簡單又方便的方法，用熟悉的方法使用 icon。
UnoCSS 是 antfu 開發的一個原子化 CSS 引擎，這里就不詳細說了，大家感興趣可以去讀一下他的文章【重新構想原子化CSS - 知乎】。
以下教程都是只針對 Vite，VueCli 的要自己研究下。
# @iconify-json/ep 是 Element Plus 的圖標庫
npm i -D unocss @iconify-json/ep
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { presetIcons } from 'unocss'
export default defineConfig({
plugins: [
vue(),
// 添加以下配置
Unocss({
presets: [
presetIcons({
scale: 1.2,
warn: true
}),
],
// 以下配置是為了可以直接使用標簽 <i-ep-edit />
variants: [
{
match: (s) => {
if (s.startsWith('i-')) {
return {
matcher: s,
selector: (s) => {
return s.startsWith('.') ? `${s.slice(1)},${s}` : s
},
}
}
},
},
],
})
]
})
// 在 main.ts 里添加以下代碼
import 'uno.css'
<template>
<div style="margin: 50px;">
<el-space direction="vertical" alignment="left">
<!-- 直接使用 -->
<el-space>
<!-- 使用class -->
<div class="i-ep-lock"></div>
<!-- 使用標簽 -->
<i-ep-edit />
</el-space>
<!-- 組件里使用 -->
<el-button icon="i-ep-avatar">Button</el-button>
<el-input prefix-icon="i-ep-search" suffix-icon="i-ep-pointer" ></el-input>
<el-menu>
<el-menu-item >
<el-icon class="i-ep-menu"></el-icon>
<span>Navigator Two</span>
</el-menu-item>
</el-menu>
</el-space>
</div>
</template>
運行效果
UnoCSS 是關鍵詞匹配按需生成的，所以要注意以下使用方法
<!-- 錯誤 -->
<script steup>
const icon = 'lock';
</script>
<div :class="`i-ep-${icon}`"></div>
<div :class="`i-ep-${isLock ? 'lock' : 'menu'}`"></div>
<!-- 正確 -->
<script steup>
const icon = 'i-ep-lock';
</script>
<div :class="icon"></div>
<div :class="isLock ? 'i-ep-lock' : 'i-ep-menu'"></div>
如果你的 icon 變量是從接口獲取的，要修改 UnoCSS 的配置
Unocss({
// 添加以下配置, safelist 是預生成 i-ep-lock 的樣式不管代碼有沒有使用這個圖標
safelist: ['i-ep-lock', 'i-ep-menu']
})
快速把整個圖標庫載入
import epIcons from '@iconify-json/ep'
Unocss({
// 修改成以下配置
safelist: [
...Object.keys(epIcons.icons.icons).map(name => `i-${epIcons.icons.prefix}-${name}`),
],
})
Ic?nes 可以在這個找自己喜歡的圖標集，我們挑 ant design 來說一下。
# 安裝依賴
npm i @iconify-json/ant-design -D
<template>
<div style="margin: 50px;">
<el-space direction="vertical" alignment="center">
<!-- 直接使用 -->
<el-space>
<div class="i-ant-design:account-book-filled"></div>
<i-ant-design:carry-out-twotone />
</el-space>
<!-- 組件里使用 -->
<el-button icon="i-ant-design:percentage-outlined">Button</el-button>
<el-input prefix-icon="i-ant-design:search-outlined" suffix-icon="i-ant-design:heart-filled" ></el-input>
<el-menu>
<el-menu-item >
<el-icon class="i-ant-design:align-center-outlined"></el-icon>
<span>Navigator Two</span>
</el-menu-item>
</el-menu>
</el-space>
</div>
</template>
完美配合
ant Design 圖片完美配合
大家開始愉快地寫代碼吧。更多的使用配置大家可以去看一下文檔，也參考一下我寫的一個后臺模板里的配置MDAdmin(基于 Vue3 + Ts + Element Plus)。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
