ウィジェット、uni-appなどsvgタグがサポートされていない場合、svgアイコンソリューション

SVGはそのスケーリングに歪みがなく、色を動的に変えることができるなどの特徴から、web開発で広く使用されており、現在よく見られる使用方法は2つある.
1.フォントファイルに変換
オンラインのサイトが多く、iconfont、iconmoonなど、選択したアイコンをフォントファイルに統合し、特定のラベル+クラス名で使用することができます.
2.symbol参照の使用
主な原理は、使用するすべてのsvgファイルコードを1つのコードブロックに統合し、svgピクチャごとに一意のIDを与え、使用時にこのIDを通じて具体的なsvgピクチャを導入し、コードは以下の通りである.

以上の2つの方法は、web側で完璧にサポートできますが、問題もあります.
1.必要に応じて参照できない
フォントファイルを個別に分割することはできません.いずれかのアイコンだけを使用しても、すべてのフォントファイルを導入する必要があります.symbolリファレンスでは、Aアイテムは50個のsvgアイコン、Bアイテムは10個を使用します.パッケージ後のファイルの大きさを追求するには、フォントファイルを再生成したり、symbolリファレンスのsvgセットをリセットしたりする必要があります.
2.追加ファイル、重複コードが多すぎる
fontの場合、6つのファイルが生成されますが、symbolが参照する重複コードが多すぎて、svgのフォーマットが固定されています.svgラベル自体のコードが重複コードに属しています.中のversion、xmlss属性は完全に同じです.パッケージサイズに制限がある項目、例えば、ウィジェットなど、これらは最適化可能な場所に属しています.
具体的には、ウィジェットやuni-appというように、svgラベル自体はサポートされていないので、フォントファイルしか使用できませんが、フォントファイルには以上の問題があるので、最適化の考え方は:
1.ウィジェットなどsvgタグがサポートされていない環境での使用
2.単一svgをオンデマンドで使用
svgライブラリには複数のファイルがある場合がありますが、各プロジェクトでは一部のみ使用できます.
3.SVGの体積を縮小し、重複ラベルを取り除く
最初の問題では、ウィジェットはsvgラベルをサポートしていませんが、cssのbackground-imageとDATA Urlsをサポートしています.以下のコードと同様にサポートされています.

.icon{
background-image: url("data:image/svg+xml,");
}

単一の二重引用符と特殊な文字の符号化に注意する必要があります.色文字の#は%23に変換する必要があります.
svgラベルの重複の問題は、コードの動的な埋め込みで解決できます.アイコンを使用するときに、svgラベルを動的に追加します.
以上の最適化のニーズに対して、npmライブラリを書いて、必要に応じてsvgを参照して、svg体積を減らして、uni-appをサポートして、使用説明
一般vueプロジェクト向け

import Vue from 'vue'
import '@xpf0000/vuesvgicon/dist/VueSvgIcons.css'
import VueSvgIcons from '@xpf0000/vuesvgicon'
Vue.component('Icons', VueSvgIcons)

uni-appリファレンスumdファイルに問題があり、ソースファイルを直接参照

import Vue from 'vue'
import VueSvgIcons from '@xpf0000/vuesvgicon/src/components/vue-svg-icons'
Vue.component('Icons', VueSvgIcons)

svgファイルを追加し、登録メカニズムを採用し、svgデフォルトの幅とsvg内部コードを記入します.

import Icon from '@xpf0000/vuesvgicon'
Icon.register({
  'text': {
    'width': 300,
    'height': 150,
    'raw': `



I love SVG I love SVG
`
  }
})

アイコンの使用

import './text.js'

export default {
  data: function () {},
  methods: {}
}

ウィジェット、APP側で使用、propsの追加:background-image=「true」

実行時にcssのbackground-imageを使用して表示されます
NPM: https://www.npmjs.com/package/@xpf0000/vuesvgicon GIT: https://github.com/xpf0000/vuesvgicon
皆さんstar&ディスカッションを歓迎します