sponsored links

位元組跳動開源,超過2000個圖示的高質量圖示庫——IconPark

介紹

IconPark是位元組跳動團隊開源的一個開源圖示庫,一共提供超過2000個高質量的圖示,提供視覺化介面配置來實現不同的方案,非常適合開發者和設計師來使用!


位元組跳動開源,超過2000個圖示的高質量圖示庫——IconPark


Github

GitHub:https://github.com/bytedance/IconPark

官網:https://iconpark.oceanengine.com/

特性

  • 豐富多彩的資源庫免費使用

2400+基礎圖示,29種圖示分類,提供更多的選擇,透過變化可達到百萬量級,那麼使用圖示就很方便了

  • 供各類不同人群使用

IconPark的使用者可以是任何人,包括設計師、工程師或者產品經理等人群針對不同的人群提供了一整套使用指南,非常容易學習和使用

  • 主題變換

IconPark可以透過單一的SVG原始檔變換出各種主題,包括線框、填充、雙色、多色等特性,僅僅是需要配置兩個屬性

位元組跳動開源,超過2000個圖示的高質量圖示庫——IconPark

  • 非常豐富的分類

IconPark具備非常豐富的分類,包括基礎、辦公、編輯、表情、餐飲、操作、抽象、兒童、方向、服飾、符號、工業、家居、建築、交流、連線、旅行、美妝、品牌、錢財、人群、聲音、時間、手勢、書籍、資料庫、天氣、圖表、圖形、醫療健康、硬體、運動、其它!涵蓋了諸多分類已適應不同場景下的使用!

位元組跳動開源,超過2000個圖示的高質量圖示庫——IconPark

  • 提供可供前端開發者所使用的框架元件包

包括React、Vue(2和3)、SVG的開發者使用的包

位元組跳動開源,超過2000個圖示的高質量圖示庫——IconPark

  • 定製化

任何人都可以透過視覺化介面進行一些配置來滿足各類需求,包括大小、線段粗細、風格、描邊顏色、端點型別、拐點型別等

位元組跳動開源,超過2000個圖示的高質量圖示庫——IconPark

安裝使用

筆者作為開發者,經常有時候需要去找一些圖示,當然可供選擇的有很多,這裡我們以在Vue3 的專案中使用圖示為例安裝使用:

  • 安裝依賴包

使用你喜歡的包管理工具安裝,比如npm或者yarn

npm install @icon-park/vue-next --save
//或者
yarn add  @icon-park/vue-next --save
  • 最簡單的示例如下:
<template>
<home theme="filled"/>
</template>
<script>
import {Home} from '@icon-park/vue-next';

export default {
    components: {
        Home
    }
}
</script>
  • 全域性引用(不推薦)
import {install} from '@icon-park/vue-next/es/all';
import '@icon-park/vue-next/styles/index.css';
import {createApp} from 'vue';
const app = createApp({});
install(app);
install(app, 'i');
app.mount('#app');
  • 針對性全域性配置
<template>
<div>
<home/>
</div>
</template>
<script lang="ts">
import {DEFAULT_ICON_CONFIGS, IconProvider} from '@icon-park/vue-next';
import {Home} from '@icon-park/vue-next';

export default {
    name: 'App',
    setup(){
        IconProvider({...DEFAULT_ICON_CONFIGS, prefix: 'icon'});
    },
    components: {
        Home
    }
};
</script>
  • 按需引入(babel-plugin-import)

推薦按需載入圖示,因為這樣可以大大減少編譯程式碼量

{
    "plugins": [
        [
            "import",
            {
                "libraryName": "@icon-park/vue-next",
                "libraryDirectory": "es/icons",
                "camel2DashComponentName": false
            }
        ]
    ]
}
<template>
<icon-park type="AddText" theme="filled"/>
<icon-park type="add-text" theme="filled"/>
</template>
<script>
import {IconPark} from '@icon-park/vue-next/es/all';

export default {
    components: {
        IconPark
    }
}
</script>
  • 屬性配置

位元組跳動開源,超過2000個圖示的高質量圖示庫——IconPark

總結

IconPark確實是一個優秀的圖示庫,其設計思想是以不變應萬變的理念,透過一些配置即可滿足不同場景以及不同人群的使用,提供的開發框架更加接近開發者使用,非常適合引入到自己的專案中,從此圖示問題不在愁!

位元組跳動開源,超過2000個圖示的高質量圖示庫——IconPark

分類: 科技
時間: 2021-07-16

相關文章

位元組跳動資料中心支出超過騰訊,在中國僅次於阿里巴巴

位元組跳動資料中心支出超過騰訊,在中國僅次於阿里巴巴
Synergy Research Group的新資料顯示,超大規模提供商運營的大型資料中心的總數量在第二季度末增加到了659 個,自2016年年中以來翻了一倍多. 就地區而言:美國和中國繼續佔主要雲和 ...

位元組跳動做音樂,投入十億買版權,代號“白月光”

位元組跳動做音樂,投入十億買版權,代號“白月光”
專案的重點和難點是尋找更多差異性,迴避直接競爭. 文 | 沈方偉 編輯 | 高洪浩 <晚點 LatePost>瞭解到,位元組跳動目前正開發一款獨立音樂播放器,專案代號 "白月光( ...

這一領域,位元組跳動已悄悄投入10億

這一領域,位元組跳動已悄悄投入10億
關於解除音樂獨家版權的風從2021年7月12日颳起,到了7月24,國家市場監管總局正式公佈,依法對騰訊控股有限公司作出責令解除網路音樂獨家版權等處罰. 總局的行政處罰決定主要包括:責令騰訊及關聯公司採 ...

位元組跳動西瓜影片
張一鳴你好: 關於位元組跳動西瓜影片,如果獨立發展的情況下,我個人認為應該走精品內容路線,原因西瓜影片和抖音內容嚴重重合,重合度可以說百分之80以上,精品內容儲備無法持續連結可以說跟不上或者幾乎沒有. ...

位元組跳動利用單張圖片做三維重建:將NeRF、MPI結合,提出MINE

位元組跳動利用單張圖片做三維重建:將NeRF、MPI結合,提出MINE
機器之心專欄 位元組跳動視覺技術團隊 來自位元組跳動視覺技術團隊的研究者將 NeRF 和 Multiplane Image(MPI)結合,提出了一種新的三維空間表達方式 MINE.該方法透過對單張圖片 ...

漱口水品牌“參半”今年融資五輪,位元組跳動等連續追投,前阿里參謀長曾鳴旗下基金最新加入
<科創板日報>(特約記者 彭一力)訊,單價25元不到的一瓶漱口水,上線80天賣了1個億,新興漱口水品牌"參半"由此一舉開啟知名度. 不僅銷售收入猛增,一級融資市場上也捷 ...

騰訊、阿里、位元組跳動網址遮蔽解封,使用者、平臺、商家友好體系

騰訊、阿里、位元組跳動網址遮蔽解封,使用者、平臺、商家友好體系
在具體介紹使用者.平臺以及商家三者關係進度的前提下,我們先了解一下騰訊.阿里以及位元組跳動等網路平臺大神之間為什麼會互相遮蔽網址,這對於使用者而言是一個非常不好的體驗,但是它們依舊做了,還做得非常徹底 ...

位元組跳動公開虛擬角色捏臉專利 此前曾推出捏臉App

位元組跳動公開虛擬角色捏臉專利 此前曾推出捏臉App
[CNMO新聞]據企查查APP顯示,北京位元組跳動網路技術有限公司9月17日公開了"一種虛擬角色捏臉的方法.裝置.電子裝置及儲存介質"專利,公佈號CN113409437A,申請日期 ...

位元組跳動公開虛擬角色捏臉專利,網易騰訊也有相關佈局

位元組跳動公開虛擬角色捏臉專利,網易騰訊也有相關佈局
智慧芽全球專利資料庫顯示,9月17日,北京位元組跳動網路技術有限公司公開了一件發明專利"一種虛擬角色捏臉的方法.裝置.電子裝置及儲存介質"專利,公開號為CN113409437A,於 ...

位元組跳動推出悟空瀏覽器APP,號稱“一個能賺錢的瀏覽器”

位元組跳動推出悟空瀏覽器APP,號稱“一個能賺錢的瀏覽器”
位元組跳動推出悟空瀏覽器APP,號稱"一個能賺錢的瀏覽器",位元組跳動也是今日頭條和抖音運營的的母公司,今日宣佈推出手機瀏覽器平臺,名為悟空瀏覽器. 據宋九九瞭解到該APP注重下沉 ...

美股異動 | 騰訊音樂(TME.US)盤初跌近5%,位元組跳動將於年內推出音樂流媒體產品
智通財經APP獲悉,9月20日(週一)美股盤初,騰訊音樂(TME.US)股價下跌,截止至21:45,跌4.76%,報7.495美元.市場訊息稱位元組跳動將於今年下半年在國內推出一款音樂流媒體產品,目前 ...

百世快遞將被誰收購?極兔?位元組跳動?

百世快遞將被誰收購?極兔?位元組跳動?
9月23日訊息,據彭博社最新訊息,百世集團考慮出售快遞子公司,估值或至多達10億美元. 不過百世集團表示,對於市場傳言不予置評. <快遞觀察家>從百世快遞內部人士瞭解到,快遞業務的確在洽談 ...

新鮮早科技丨傳位元組跳動將推出獨立電商APP;騰訊或將於本週宣佈合併搜狗;小冰推出首個人工智慧社交APP“小冰島”
21世紀經濟報道記者楊清清 實習記者陳龍潼 綜合報道 早上好,新的一天又開始了.在過去24小時內,科技行業發生了哪些有意思的事情?來跟21tech一起看看吧. [巨頭風向標] 1.傳位元組跳動將推出獨 ...

位元組跳動旗下平臺幸福裡回應“收購北京麥田”:只是收購了麥田旗下一家公司
36氪獲悉,針對"收購北京麥田"傳聞,位元組跳動旗下平臺幸福裡相關負責人回應稱:幸福裡實際只是收購了麥田旗下一家公司,並非收購北京麥田.據瞭解,幸福裡是位元組跳動2018年成立的房 ...

位元組跳動關聯公司全資入股一房地產經紀公司
天眼查App顯示,近日,北京福旺房地產經紀有限公司發生工商變更,新增位元組跳動關聯公司北京好房有幸資訊科技有限公司為股東,持股比例100%.原股東北京金色麥田房產經紀有限公司退出,同時法定代表人由吳存 ...

位元組跳動強勢進入造車領域,投資多個相關專案

位元組跳動強勢進入造車領域,投資多個相關專案
近期推出了汽車雲業務,已從亞馬遜雲和京東雲等公司招募人員,負責推進該專案.同時,位元組也開始與一家新造車和貨運自動駕駛公司等洽談 "智駕雲" 的專案合作.位元組跳動的汽車雲提供三大 ...

東方斯卡拉2.0的位元組跳動能否超越騰訊

東方斯卡拉2.0的位元組跳動能否超越騰訊
位元組跳動就像是網際網路時代的東方斯卡拉. 是的,就是前些年在回家的大巴車上,小電視裡一直放,讓文藝青年的你不得不看,然後看了半個小時後又真香地停不下來,變成2B青年,希望晚點到站,把魏三的這段看完的 ...

位元組跳動外賣小程式獲得登記批准
財經網科技10月14日訊,據天眼查App顯示,北京字跳網路技術有限公司心動外賣小程式軟體獲得登記批准,登記號為2021SR1481161,批准日期為2021年10月11日. 據報道,今年7月,位元組跳 ...

新鮮早科技丨蘋果或下調年內iPhone生產目標;位元組跳動旗下巨量引擎推出巨量學;藍色起源完成第二次載人太空飛行
21世紀經濟報道記者楊清清 實習記者陳龍潼 綜合報道 早上好,新的一天又開始了.在過去24小時內,科技行業發生了哪些有意思的事情?來跟21tech一起看看吧. [巨頭風向標] 1.蘋果或下調年內iPh ...