Shopify

में एसवीजी आइकन का उपयोग करना मेरे पास 30 से अधिक svg आइकन हैं जिन्हें मैं अपनी Shopify थीम में उपयोग करना चाहता हूं। पठनीयता खातिर मैं लेकिन उपयोग करने के लिए .liquid टेम्पलेट में सीधे तो जोड़ने के लिए नहीं करना चाहते हैं शामिल हैं:Shopify

{% include 'some-icon' %}

और कुछ-icon.liquid

समस्या

एसवीजी कोड के लिए किया जाता है कि इन सभी 30 फ़ाइलों को मेरी स्निपेट निर्देशिका में रहना होगा। स्निपेट्स की सभी अन्य फाइलों के साथ यह एक गड़बड़ होगी। यह करने के लिए किसी भी अन्य तरीके से

{% include 'MyIcons/some-icon' %}

यह Shopify में एक अतिरिक्त निर्देशिका बनाने और उन्हें वहां से आयात करने के लिए संभव है? धन्यवाद

स्रोत

2015-02-13 Mircea

थोड़ा विषय बंद है, लेकिन आप इस्तेमाल कर सकते हैं यदि आपके एसवीजी प्रतीक एक रंग हैं https: // GitHub

<svg class="icon icon-{{ icon }}"> <use xlink:href="#icon-{{ icon }}"></use> </svg>

आप इस तरह है कि टुकड़ा भी शामिल होगा .com/FontCustom/fontcustom उन्हें फ़ॉन्ट में रूपांतरित करने के लिए। मैंने इस परियोजना के लिए 6+ महीने पहले किया था और खुश नहीं हो सका। – firien

monochromatic ??? आप भरने के साथ कोई रंग जोड़ सकते हैं। फ़ॉन्ट-फेस का मतलब अतिरिक्त अनुरोध है और अर्थपूर्ण नहीं है, यही वह है जो मैं पहले स्थान – Mircea

roger से बचने की कोशिश कर रहा हूं। लेकिन monochromatic द्वारा मेरा मतलब था कि आइकन एक समान वर्दी रंग है, और इसमें कोई ग्रेडियेंट शामिल नहीं था - क्योंकि यह एक फ़ॉन्ट ग्लाइफ में अच्छी तरह से स्थानांतरित नहीं होगा। – firien

Shopify को एसवीजी आइकन जोड़ने का एक सरल और रखरखाव तरीका ढूंढ रहा था। यहां मेरा सबसे अच्छा तरीका मिला है। यदि आप बेहतर जानते हैं तो कृपया मुझे बताएं।

snipets में फ़ाइल बनाने 'मेरे-विषय-चिह्न' डायन शामिल होंगे:

{% if my-theme-icons == 'home' %} 
<svg xmlns="http://www.w3.org/2000/svg"> 
... my home icon 
</svg> 
{% elsif my-theme-icons == 'search' %} 
<svg xmlns="http://www.w3.org/2000/svg"> 
... my search icon 
</svg> 
{% endif %}

अपने टेम्पलेट में सिर्फ उन्हें शामिल के रूप में:

{% include 'my-theme-icons' with 'home' %} 
{% include 'my-theme-icons' with 'search' %}

आशा है कि यह मदद करता है

स्रोत

2015-02-13 20:27:33 Mircea

वास्तव में सरल, आसान कार्यान्वयन। बहुत बहुत धन्यवाद – Benji

केस कथन – Buts

नहीं। आप संपत्तियों, या स्निपेट, या अन्य थीम घटकों के लिए निर्देशिका नहीं बना सकते हैं। आपके स्थानीय विकास पर्यावरण में जहां एक गड़बड़ी होती है, शायद आप प्रकारों को अधिक स्पष्ट रखने के लिए विस्तार से अपनी फाइलों को रंग दे सकते हैं, या ऐसा करने के लिए एक्सटेंशन द्वारा कुछ सॉर्टिंग चालू कर सकते हैं।

स्रोत

2015-02-14 04:21:22

का उपयोग करने के लिए बहुत बेहतर होगा मैं इसे समझ गया। {समाधान '%} के साथ {% my' थीम-आइकॉन 'के साथ मेरे समाधान के बारे में आप क्या सोचते हैं। कोई प्रदर्शन मुद्दे? धन्यवाद – Mircea

इसके साथ कोई प्रदर्शन समस्या नहीं है, हालांकि स्निपेट बहुत गन्दा हो सकता है। मैं सुझाव दूंगा कि {{% में 'my-theme-icons' आइकन शामिल हैं, आइकन: 'icon-home'%} '। इस तरह से आपके स्निपेट को 'my-theme-icons-icons' के विवरणों के समूह के बजाय चर 'आइकन' का उपयोग करके बहुत सरल बनाया जा सकता है। – Carson

{% include 'icon' with 'shopify' %}

अपने इच्छित आइकन पर कॉल करें, और उन्हें केस स्टेटमेंट के साथ स्निपेट में व्यवस्थित करें।

<!-- snippets/icon.liquid --> 
<span class="icon" aria-hidden="true"> 
    {% case icon %} 
    {% when 'shopify' %} 
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="shopify" aria-label="Shopify" role="img"> 
     <title>Shopify</title> 
     <desc>Shopify {{ 'icon.icon' | t }}</desc> 
     <path d="M13.3 3.1C13.3 3 13.2 3 13.1 3c-0.1 0-1.3-0.1-1.3-0.1S11 2 10.9 1.9c-0.1-0.1-0.3-0.1-0.3 0 0 0-0.2 0.1-0.5 0.1C9.8 1.2 9.5 0.5 8.3 0.5 8.1 0.1 7.8 0 7.5 0c-2.1 0-3 2.6-3.4 3.9C3.3 4.1 2.8 4.3 2.7 4.3 2.3 4.5 2.2 4.5 2.2 4.9c0 0.3-1.2 9.4-1.2 9.4l9.1 1.7 4.9-1.1C15 14.9 13.3 3.2 13.3 3.1zM8.3 2.6c-0.5 0.2-1 0.3-1.6 0.5 0.3-1.2 0.9-1.8 1.4-2C8.3 2 8.3 2.6 8.3 2.6zM7.4 0.6c0.1 0 0.2 0 0.3 0.1C7.1 1 6.3 1.7 6 3.3 5.6 3.4 5.2 3.6 4.8 3.7 5.1 2.5 6 0.6 7.4 0.6zM7.8 7.5c0 0-0.5-0.3-1.2-0.3 -1 0-1 0.6-1 0.8 0 0.8 2.2 1.1 2.2 3.1 0 1.5-1 2.5-2.3 2.5 -1.6 0-2.4-1-2.4-1l0.4-1.4c0 0 0.8 0.7 1.5 0.7 0.5 0 0.6-0.4 0.6-0.6 0-1.1-1.8-1.1-1.8-2.9 0-1.5 1.1-2.9 3.2-2.9 0.8 0 1.2 0.2 1.2 0.2L7.8 7.5zM8.8 2.4c0-0.1 0-0.1 0-0.2 0-0.5-0.1-0.9-0.2-1.2 0.5 0.1 0.8 0.6 1 1.2C9.4 2.3 9.1 2.4 8.8 2.4z" class="fill"/> 
    </svg> 
    {% when 'menu' %} 
    <!-- SVG CODE GOES HERE --> 
    {% when 'cart' %} 
    <!-- SVG CODE GOES HERE --> 
    {% else %} 
    <!-- {{ icon | capitalize }} icon not found --> 
    {% endcase %} 
</span>

स्रोत

2017-02-06 02:01:21 Buts

मैं एक काम धावक (Gulp या ग्रंट की तरह) का उपयोग कर एक एसवीजी आइकन स्प्राइट के निर्माण के लिए सुझाव है (वहाँ कई मॉड्यूल है कि ऐसा करने के हैं)। आपकी src फ़ाइलें थीम फ़ोल्डर के बाहर हो सकती हैं, आखिरकार एक साथ स्नैपेट में जोड़ा जा सकता है जिसे आप <body> टैग खोलने के तुरंत बाद शामिल करते हैं। icon.liquid एक और टुकड़ा तो संदर्भ और "का उपयोग करता है" उन्हें: {% include 'icon' with 'logo' %}

स्रोत

2017-08-31 16:24:11

उत्तर

संबंधित मुद्दे