這是一個圖標庫,上面的所有圖標完全開源,皆可商用!該圖標庫還支持自定義圖標,你可以隨意設置圖標的邊框、大小、風格、顏色等屬性。在無障礙瀏覽和性能方面該庫也做了充足的優化,它與眾不同!
https://github.com/mikolajdobrucki/ikonate
我們很難找到一個完美的圖標集,尤其是免費圖標集。Ikonate圖標可以輕鬆調整,以滿足正在設計的品牌或產品的需求
Ikonate是第一個這樣的圖標集,旨在完全可訪問*並幫助使產品更具包容性,對每個人都有用。
在網際網路上找到的大多數圖標都充斥著大量無用的代碼,只會降低你的代碼性能。Ikonate圖標開箱即用。
Ikonate完全開源,你可以到Github獲取最原始的代碼,完全可商用
可以手動克隆倉庫到項目中安裝
git clone https://github.com/eucalyptuss/ikonate.git
也可以使用npm管理
npm install ikonate
npm install
npm run build
原始SVG,所有圖標都可以在./ikonate/icons中作為原始的,沒有樣式的SVG使用
演示文件:
演示分別在./ikonate/build/inline/index.html和./ikonate/build/sprite/index.html下提供。如果直接在瀏覽器中打開精靈演示,則可能無法正確顯示圖標。要正確打開,需要在伺服器環境下打開,建議演示可以使用live-server。
要將圖標生成為單獨的樣式svg文件,可訪問官方網站。使用圖標作為或background-image,則無法使用CSS自定義它們。
要將圖標用作內聯svg,請使用適合您項目的技術從./ikonate/icons導入所需的圖標。使用此方法,可以稍後使用CSS自定義圖標。
也可以自定義CSS
要使用CSS自定義圖標,需要將圖標用作內聯SVG或SVG sprite。可以使用以下CSS參數來自定義圖標:
例如:
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
在官方網站上可在線導出SVG
你可以根據自己的需要設置邊框、尺寸、顏色等,如下:
ikonate是一個及其優秀的開源圖標庫,你可以用在任何時候任何地方,完全免費,送給不愛寫代碼的設計師!如果你有這樣的需求,不妨嘗試一下!