svgIcon : Extraction des icônes SVG - Blogger XML Documentation

Extrait de la documentation personnelle de
Blogger - svgIcon [Common]
Gadget Version 1 Gadget Version 2 Balisage
Common Common
Original
Description de l'inclusion
svgIcon est l'identifiant d'une inclusion commune qui a été conçue pour extraire des icônes SVG contenues dans un fichier image-objet.
En bref, l'inclusion reconstruit les balises <svg> avec le nom d'un fichier qui a été défini dans l'inclusion parente.
Directives d'usage et niveau de priorité de mise à jour
Thème Version 1
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Version 2
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Dynamique
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Version 3
Garantie d'usage : Oui
Priorité haute
Variante par thème
Inexistante.
Inclusion de gadget équivalente
Aucune.

Contenu de l'inclusion

Le code XML

<b:includable id='svgIcon'>
  <svg class='svg-icon-24'>
    <b:class expr:name='data:iconClass'/>
    <use expr:xlink:href='"/responsive/sprite_v1_6.css.svg" fragment data:iconId' xmlns:xlink='http://www.w3.org/1999/xlink'/>
  </svg>
</b:includable>

Les nœuds parents

ID Inclusion Balisage
backArrowIcon
Original
chevronDownIcon
Original
chevronUpIcon
Original
closeIcon
Original
commentIcon
Original
defaultAvatarIcon
Original
emailIcon
Original
facebookIcon
Original
flatBloggerIcon
Original
forwardArrowIcon
Original
linkIcon
Original
menuIcon
Original
pinterestIcon
Original
searchIcon
Original
shareIcon
Original
sharingOtherIcon
Original
twitterIcon
Original
verticalMoreIcon
Original

Appel de l'inclusion et paramètres

L'inclusion peut être appelée depuis un emplacement quelconque dans le XML.

<b:include name='svgIcon'/>

Présenté tel quel, l'appel ne travaillera pas, puisqu'il faut mentionner le nom du fichier a extraire. Quelques autres paramètres peuvent être également ajouté via l'attribut data dans la balise <b:include> ou via un jeu de balises <b:with>.

<b:include data='{ ITEMS }' name='svgIcon'/>

L'objet peut contenir ces items:

Alias Signification -
iconId L'identifiant de l'icône SVG. Voir la liste des identifiants fournis par Blogger ci-dessous. Obligatoire
iconClass Ajouter le nom d'une classe à la balise <svg> Facultatif
Exemple
<b:include data='{ iconId: "ic_share_black_24dp" }'
           name='svgIcon'/>

Identifiants des icônes SVG

Ce tableau reprend la liste de tous les SVG hébergés sur votre blog. La taille par défaut est de 24px. Comme vous pourrez le constater, leurs dimensions peuvent être adaptées.

Identifiant Icône 24px Icône 48px Icône 96px Icône 192px
ic_24_email_dark
ic_24_facebook_dark
ic_24_link_dark
ic_24_pinterest_dark
ic_24_twitter_dark
ic_add_box_black_24dp
ic_arrow_back_black_24dp
ic_arrow_forward_black_24dp
ic_chat_bubble_black_24dp
ic_check_box_black_24dp
ic_check_box_outline_blank_black_24dp
ic_chevron_left_black_24dp
ic_chevron_right_black_24dp
ic_close_black_24dp
ic_expand_less_black_24dp
ic_expand_more_black_24dp
ic_expand_more_black_24dp
ic_mode_comment_black_24dp
ic_more_horiz_black_24dp
ic_more_vert_black_24dp
ic_person_black_24dp
ic_post_blogger_black_24dp
ic_rss_feed_black_24dp
ic_search_black_24dp
ic_share_black_24dp

Modifier l'inclusion

L'inclusion peut être modifiée dans un marquage commun.

En savoir plus

<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    <b:includable id='svgIcon'>

      <!-- Add new code for "svgIcon" inclusion here -->

    </b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>

Lorsque l'inclusion est marquée explicitement dans le thème, la version "BackEnd" n'est plus prioritaire.

Dans ce cas-ci, pour appeler l'inclusion "BackEnd", vous devez mentionner le préfixe super à l'identifiant de l'inclusion.

En savoir plus

  <!-- Call Custom version -->
  <b:include name='svgIcon'/>

  <!-- Call BackEnd version -->
  <b:include name='super.svgIcon'/>

Disponibilité des variantes de l'inclusion

Thèmes FrontEnd BackEnd
Original Inexistant Original
Contempo Inexistant Original
Emporio Inexistant Original
Essential Inexistant Original
Notable Inexistant Original
Soho Inexistant Original
Afficher les variantes
Légende :
  • Original : Balisage original
  • Original+ : Balisage original (super)
  • Theme : Balisage spécifique au thème
  • Inexistant : Balisage inexistant

Les Inclusions Communes

XML Inclusions Communes

Source & contribution

Google PE Program
Équipe Blogger/Experts Produit Blogger

Classifications, corrélations & échantillonnages

Soraya Lambrechts

Dernière mise à jour

Licence

Ce contenu est protégé par la licence CC BY-NC-ND 4.0

🛈 Info

Il arrive fréquemment que nos contenus soient reproduits sans autorisation. Si vous avez trouvé cette fiche ailleurs, nous vous recommandons vivement de consulter Blogger Code PE pour bénéficier de la version originale, à jour et vérifiée.

Spotlight

Introduction : Search Engine Optimization (SEO)

Image
Le SEO. Trois lettres qui font briller les yeux des spécialistes… ou fuir les blogueurs débutants. Entre mythes, charabia technique et fausses promesses de "première place garantie", difficile de savoir par où commencer. Pourtant, derrière cet acronyme se cache un concept bien plus simple qu'il n'y paraît : aider les moteurs de recherche à trouver, comprendre et aimer vos pages. Pas besoin de maîtriser la magie noire du web ni d'avoir un diplôme en algorithmie pour vous lancer.Dans cette introduction, nous allons démystifier le référencement naturel. Comment Google parcourt le web ? Pourquoi certains sites sortent du lot ? Quelles sont les règles du jeu pour améliorer sa visibilité sans vendre son âme à une agence hors de prix ? On vous explique tout, pas à pas, sans poudre de perlimpinpin ni jargon incompréhensible.Alors, le SEO réservé aux grandes marques ? Certainement pas. Que vous soyez propriétaire d’un blog personnel, d’un site professionnel, ou simple curi
En savoir plus ➤

Populaires cette semaine

L'Éditeur XML de Thème Blogger : Quand le BackEnd Rencontre le FrontEnd

Image
En 2007, une évolution importante est survenue dans l'univers de Blogger : l'éditeur XML de thème a fait son apparition, brouillant les lignes entre backEnd et frontEnd pour des millions de "Bloggeriens". Mais que signifie cette évolution pour les utilisateurs ? Et surtout, qu'en est-il de la propriété intellectuelle et de la licence de ces thèmes ? Plongeons dans les détails de ce curieux mélange technique tout en tenant compte des Conditions générales d'utilisation (CGU) de Google.
En savoir plus ➤