Github地址： ShanaMaid/archer-svgs

哇哦!無限的svgs!你可以使用archer-svgs去異步加載svg并將它緩存在localStorage里，當你再次使用已經加載過的svg時將不需要再發起http請求。將svgs從你的js-bunlde里移除，并且永遠減小js-bunlde的體積。（例子: 不需要因為1kb的svg更新而重新加載整個100kb的svg模塊。）
如果你覺得這個項目還不錯，可以給我一個star和follow來支持我
ps：archer命名取自fate里面archer的技能無限劍制

在線示例

安裝

npm

npm install archer-svgs

yarn

yarn add archer-svgs

特性

• 使用TypeScript進行, 提供d.ts文件提高開發效率。
• 異步加載 svg
• 緩存 svg 在 localstorage 或者 disk-cache
• 已經緩存svg在再次使用的時候不用發起http請求
• 體積小
• 預加載 svg

設計思路

配置初始化

預加載

兼容性

archer-svgs 基于fetch和localStorage.針對fetch, 采用了 whatwg-fetch去做兼容!換句話說, 只要你的瀏覽器支持 xhr和localStorage，你就可以使用它!他們的兼容性如下圖所示：

方法

init()

必須先調用 init()，然后才能使用其它的Archer方法!

import Archer from 'archer-svgs';Archer.init({svgs: {'ios-airplane': {url: 'https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/ios-airplane.svg',version: 1,},'md-airplane': {url: 'https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/md-airplane.svg',version: 1,cache: false,},} })

config - paramas

export interface IConfig {svgs: ISVG; }export interface ISVG {[index: string]: {version: number | string; // svg versionurl: string; // svg urlcache?: boolean; // default: true. false: not cache svg in localStorage } }

startPrefetch()

startPrefetch會對config中的svg進行預加載!當你調用svg的時候將大大提高使用速度。

原因： - disk cache - localStorage cache

import Archer from 'archer-svgs';Archer.init(...); Archer.startPrefetch();

downloadSvg()

params是config.svgs的key, 這個方法將返回svg的內容。

import Archer from 'archer-svgs';Archer.init({svgs: {'ios-airplane': {url: 'https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/ios-airplane.svg',version: 1,},} })console.log(Archer.downloadSvg('ios-airplane'));

result:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M407.7 224c-3.4 0-14.8.1-18 .3l-64.9 1.7c-.7 0-1.4-.3-1.7-.9L225.8 79.4c-2.9-4.6-8.1-7.4-13.5-7.4h-23.7c-5.6 0-7.5 5.6-5.5 10.8l50.1 142.8c.5 1.3-.4 2.7-1.8 2.7L109 230.1c-2.6.1-5-1.1-6.6-3.1l-37-45c-3-3.9-7.7-6.1-12.6-6.1H36c-2.8 0-4.7 2.7-3.8 5.3l19.9 68.7c1.5 3.8 1.5 8.1 0 11.9l-19.9 68.7c-.9 2.6 1 5.3 3.8 5.3h16.7c4.9 0 9.6-2.3 12.6-6.1L103 284c1.6-2 4.1-3.2 6.6-3.1l121.7 2.7c1.4.1 2.3 1.4 1.8 2.7L183 429.2c-2 5.2-.1 10.8 5.5 10.8h23.7c5.5 0 10.6-2.8 13.5-7.4L323.1 287c.4-.6 1-.9 1.7-.9l64.9 1.7c3.3.2 14.6.3 18 .3 44.3 0 72.3-14.3 72.3-32S452.1 224 407.7 224z"/></svg>

clearSvgCache()

清理掉localStorage中svg的緩存。

import Archer from 'archer-svgs';Archer.clearCache();

setMaxSize()

設置localStorage中svg的緩存最大值，單位是kb。

import Archer from 'archer-svgs';Archer.setMaxSize(1024); // 1024kb

setMax()

設置localStorage中svg的緩存數量。

import Archer from 'archer-svgs';Archer.setMax(10); // 你可以在loaclStorage中緩存10個svg

fetchSvg()

通過url加載svg。

import Archer from 'archer-svgs';const svg = Archer.fetchSvg('https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/ios-airplane.svg')console.log(svg);

result:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M407.7 224c-3.4 0-14.8.1-18 .3l-64.9 1.7c-.7 0-1.4-.3-1.7-.9L225.8 79.4c-2.9-4.6-8.1-7.4-13.5-7.4h-23.7c-5.6 0-7.5 5.6-5.5 10.8l50.1 142.8c.5 1.3-.4 2.7-1.8 2.7L109 230.1c-2.6.1-5-1.1-6.6-3.1l-37-45c-3-3.9-7.7-6.1-12.6-6.1H36c-2.8 0-4.7 2.7-3.8 5.3l19.9 68.7c1.5 3.8 1.5 8.1 0 11.9l-19.9 68.7c-.9 2.6 1 5.3 3.8 5.3h16.7c4.9 0 9.6-2.3 12.6-6.1L103 284c1.6-2 4.1-3.2 6.6-3.1l121.7 2.7c1.4.1 2.3 1.4 1.8 2.7L183 429.2c-2 5.2-.1 10.8 5.5 10.8h23.7c5.5 0 10.6-2.8 13.5-7.4L323.1 287c.4-.6 1-.9 1.7-.9l64.9 1.7c3.3.2 14.6.3 18 .3 44.3 0 72.3-14.3 72.3-32S452.1 224 407.7 224z"/></svg>

更多相關內容請訪問

ShanaMaid/archer-svgs?github.com

總結

以上是生活随笔為你收集整理的浏览器svg插件_Archer-svgs: 异步加载svg方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。