O erro git add aparece "fatal: no submódulo não preenchido XXX"

Se fizermos o download do projeto correspondente diretamente do github e o colocarmos diretamente em nosso próprio controle de versão, reportaremos esse erro ao enviar fatal: no submódulo não preenchido,
mesmo se o arquivo .git for excluído , ele será inútil.

Solução

git rm - rf - em cache
git add .

Você pode ver que a execução foi bem sucedida

Esse pode ser um tópico que muitas pessoas escreveram várias vezes, mas parece ser devido a motivos de compatibilidade? O ícone é exibido na forma de Iconfont ou CSS Sprite?
Espero redirecionar o problema através da maneira de possuir vinho velho em garrafas novas.

SVG vs Image

Por exemplo, vamos fazer o seguinte efeito visual:

Descrição da imagem

Análise: pode precisar de três fotos

Imagem de fundo quando o mouse é movido
Imagem de primeiro plano gradiente
Imagem em primeiro plano em branco quando o mouse é movido

Imagem independente

Agora compare o volume da imagem de fundo com a imagem e o formato SVG (ao fazer a imagem, a cor errada é usada, a outra é a mesma, pode ser explicada, por favor, perdoe-me)

Como pode ser visto, no sentido pequena discrepância macroscópica, WebP formatar menor, seguido SVG, e PNG o volume é muito grande.

Isso SVG é derivado do Sketch rascunho de design.O código fonte contém muitos códigos redundantes e inválidos, que podem ser otimizados, da seguinte maneira.

Código fonte interno

Após otimização

Após a otimização, você pode subtrair os 1K caracteres. Obviamente, isso precisa ser usado em linha (SVG em linha)

Sprite CSS

Use CSS Sprite personificação pode reduzir o HTTP pedido, parece que também pode reduzir o tamanho global da imagem.
Aqui está uma comparação com a imagem em primeiro plano.De fato, tanto a imagem de plano de fundo quanto a imagem de primeiro plano podem ser combinadas em uma sprite.

Descrição da imagem

Pode-se ver que CSS Sprite o volume é muito maior que Inline SVG + CSS o normal.

Conclusão SVG vs Imagem

parte verde representa SVG mais de Image lugar um degrau acima da parte amarela do show, onde há desvantagens, cinza-verde representa quase.

1. Faz quase um 2019 ano, IE9 (2011年) e ele suporta todos os navegadores antigos SVG, por isso não faz muito sentido enfatizar muito a baixa compatibilidade.
2. O Inline SVG navegador deve ser renderizado como um DOM nó, portanto, DOM é necessário prestar atenção à otimização de desempenho do nó; uma SVG imagem pode ter muitos caminhos, ou seja, DOM nós, muitos DOM nós afetarão inevitavelmente o desempenho da renderização e a pegada de memória do navegador , E o método de renderização de bitmap puro não deve se preocupar a esse respeito. ( DOM Referência ao impacto da quantidade: documentação do desenvolvedor do Google WEB )

Para resumir a conclusão:

Além de imagens complexas, a introdução da seleção Inline SVG ou <img/>rotulagem é melhor SVGque o uso de 独立图像 ou 组合图像 (CSS sprite).

SVG vs Iconfont

Contraste de escrita

Primeiro, olhe para Iconfont o SVG uso de ícones, uma fonte plataforma Ali Iconfont

Obviamente, SVG Sprite é Iconfont inconveniente de usar, ele precisa escrever 3 linhas de código, e o último só precisa escrever 1 linhas.
Claro, o acima não é o foco, o foco é a mudança de cor e o suporte multicolorido abaixo

Mudança de cor e suporte a várias cores

Mude a cor

1, Iconfont por CSS color substituindo facilmente a cor do ícone.

2. É SVG Sprite mais problemático, SVG Sprite o princípio do código é o seguinte.

// 定义 symbol
<svg>
    <symbol id="icon-arrow-left" viewBox="0 0 1024 1024"> <path d="M694 ... 44.576-45.952"></path> </symbol> <symbol id="icon-arrow-right" viewBox="0 0 1024 1024"> <path d="M693 ... 0-0.48-46.4"></path> </symbol> </svg> // 使用 <svg><use xlink:href="#icon-arrow-left"/></svg> <svg><use xlink:href="#icon-arrow-right"/></svg>

A DOM estrutura renderizada fica assim:

Renderização no Shadow DOM meio (no Shadow DOM conhecimento pode ser lida sob este artigo ou este ),
este DOM elemento de estilo para ter um âmbito, fora CSS dos shadow-root elementos dentro de não ter efeito,
se você deseja substituir os elementos de cor, você precisa /deep/ para Adicione estilo através, da seguinte maneira.

svg /deep/ path {
    fill: red;
}

Obviamente, apenas adicionar fill: red isso ao elemento pai CSS também pode ter o mesmo efeito.Os elementos internos herdarão o estilo do pai.

PS: /deep/ é shadow DOM v0 o texto, v1 temos que colocar tal formulação abandonado, na verdade, o apoio v1 de shadow DOM , o pai pode atuar diretamente no estilo de shadow-root um elemento dentro.

Suporte multicolorido

1. Iconfont Ícones multicoloridos não são suportados.

2. SVG Sprite Você pode usar CSS variáveis ou shadow DOM para oferecer suporte a ícones multicoloridos shadow DOM O método foi explicado acima: A seguir, os artigos de outras pessoas são emprestados para explicar as CSS variáveis e obter multicolores, conforme a seguir.

No entanto , a compatibilidade do uso de CSS variáveis ou shadow DOMnão é boa,

CSS Variável: Edge15 +
shadow DOM: Pior. Lista de compatibilidade

3. Inline SVG Pode também suportar alterações multicoloridas e multicoloridas.

Suporte de cor gradiente

Iconfont A SVG Sprite cor do gradiente não é suportada.
Inline SVG Suporte cores degradê e boa compatibilidade.

Renderizar sem tremulação

Use Iconfont, porque o arquivo da fonte é carregado de forma assíncrona, para que o bit do ícone seja deixado em branco antes do carregamento do arquivo, e será exibido após a conclusão do carregamento.Este processo será exibido como mostrado abaixo (no blog do GitHub ) enquanto SVG Sprite ou Inline SVG carga em linha é tal surra não ocorre.

Descrição da imagem

Obviamente, Iconfont ele também pode ser carregado em linha, mas precisa ser convertido na base64 mesma tabela de tipos e carregado em conjunto. O volume do arquivo convertido se tornará aproximadamente o 1.3 dobro original .
Isso é determinado pela base64 codificação ( link de conhecimento de codificação ).

base64 Uma ferramenta online para conversão de fontes : https://transfonter.org/

Volumoso

Esta é uma falha em SVG comparação com Iconfonta figura a seguir.

Inline SVG É do mesmo SVG Sprite tamanho.

Custo de desenvolvimento

Os custos de desenvolvimento dos três são semelhantes, mas SVG ambos os métodos exigem alguma configuração no estágio inicial, e o desenvolvimento posterior será muito mais fácil (aplicativo de página única).

Veja o vue + vue cli exemplo para ilustrar a Inline SVG facilidade de uso.

1. Configuração `Webpack loader`:

{
  // 排除需要转换成 Inline SVG 的目录
  exclude: [resolve('src/svgicons')],
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader', options: { limit: 1, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { // 指定特定的目录用于 Inline SVG include: [resolve('src/svgicons')], test: /\.svg$/, use: [ // 读取 SVG 源代码 { loader: 'raw-loader' }, // 精简优化 SVG 源代码 { loader: 'svgo-loader', options: { plugins: [ { removeTitle: true }, { removeViewBox: false }, { removeDimensions: true }, // ...其他参数 ] } } ] }

2. Crie o `SvgIcon.vue` componente:

<template>
    <div class="svg-icon"> <div class="svg-icon-wrapper" v-html="icon"></div> </div> </template> <script> export default { name: 'SvgIcon', props: { name: { type: String, required: true, }, }, data () { return { icon: this.getIcon(), } }, watch: { name () { this.icon = this.getIcon() }, }, methods: { getIcon () { return require(`@/svgicons/${this.name}.svg`) }, }, } </script> <style lang="stylus" scoped> .svg-icon { overflow hidden display inline-block width 1em height 1em &-wrapper { display flex align-items center >>> svg { width 100% height 100% fill currentColor } } } </style>

3. Use:

<SvgIcon name="arrow-right" />

Conclusão SVG vs Iconfont

Inline SVG vs SVG Sprite vs Iconfont A conclusão deve ser a seguinte.

Para resumir a conclusão

A escolha Inline SVG pode ser uma boa opção para Iconfont usar.