1. Напишите это впереди 🚀
Привет~ Дорогие друзья, недавно я использовал свое свободное время, чтобы открыть исходный код проекта электронной коммерции Vue, который представляет собой высокую имитацию известной платформы для покупок продуктов O2O. Весь проект все еще весьма полезен. Вы можете отсканировать QR-код. ниже, чтобы испытать это Эта статья является проектом Основная статья о демонтаже проекта демонтажа в основном используется для компонентов svg в проекте демонтажа.
нажмите на меня, чтобы испытать
2. Что такое SVG-изображение?
Известный в отрасли блогер старший Xinxu давно сказал, что SVG Sprittes станет популярным в будущем. В частности, почему он так популярен? В конце концов, объем статьи относительно велик. Пожалуйста, наберитесь терпения и взгляните на прошлое и настоящее этого SVG.В конце концов, это призрак, и он принесет много пользы фронтенд-инженерам~
3. Используйте SVG
У SVG есть свои уникальные преимущества: он маленький по размеру и не искажается независимо от того, во сколько раз его увеличивают. Это просто круто для мобильных приложений. Не хочу этого... Так что в моем открытом исходном кодеddbuyБольшинство значков в проекте используют значки формата SVG, которые действительно приятно использовать O(∩_∩)О, ха-ха~
4. Откуда берутся ресурсы значков SVG?
Не сдавайтесь и прямо порекомендуйте вам перейти на Alibaba с открытым исходным кодомiconfontБиблиотек иконок много, и всегда найдется та, которая вам нравится, так что рекомендую, как использовать иконографию, больше говорить не буду, зайдите и найдите понравившуюся иконку, создайте свой проект, и поместите иконку себе в ваш собственный проект, вы можете напрямую экспортировать его, когда используете его.Я расскажу о методе экспорта изображения SVG здесь.
Нажмите «Копировать SVG», чтобы экспортировать код этого SVG.
1<svg t="1575638689495" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8157" width="200" height="200"><path d="M230.4 576.512c-12.288 9.728-25.088 24.064-28.672 41.984-5.12 24.576-1.024 55.296 22.528 79.872 28.672 29.184 72.704 37.376 91.648 38.912 51.2 3.584 105.984-22.016 147.456-50.688 16.384-11.264 44.032-34.304 70.144-69.632-59.392-30.72-133.632-64.512-212.48-61.44-40.448 1.536-69.632 9.728-90.624 20.992z m752.64 135.68c26.112-61.44 40.96-129.024 40.96-200.192C1024 229.888 794.112 0 512 0S0 229.888 0 512s229.888 512 512 512c170.496 0 321.536-83.968 414.72-211.968-88.064-43.52-232.96-115.712-322.56-159.232-42.496 48.64-105.472 97.28-176.64 118.272-44.544 13.312-84.992 18.432-126.976 9.728-41.984-8.704-72.704-28.16-90.624-47.616-9.216-10.24-19.456-22.528-27.136-37.888 0.512 1.024 1.024 2.048 1.024 3.072 0 0-4.608-7.68-7.68-19.456-1.536-6.144-3.072-11.776-3.584-17.92-0.512-4.096-0.512-8.704 0-12.8-0.512-7.68 0-15.872 1.536-24.064 4.096-20.48 12.8-44.032 35.328-65.536 49.152-48.128 114.688-50.688 148.992-50.176 50.176 0.512 138.24 22.528 211.968 48.64 20.48-43.52 33.792-90.112 41.984-121.344h-307.2v-33.28h157.696v-66.56H272.384V302.08h190.464V235.52c0-9.216 2.048-16.384 16.384-16.384h74.752V302.08h207.36v33.28h-207.36v66.56h165.888s-16.896 92.672-68.608 184.32c115.2 40.96 278.016 104.448 331.776 125.952z" fill="#06B4FD" p-id="8158"></path></svg>
Итак, вы можете скопировать эти коды прямо в то место, которое вы хотите использовать, ниже мой вариант использования в проекте
1<template>
2 <div id="goodsDetail">
3 <van-nav-bar title="商品详情"
4 :fixed=true
5 left-arrow
6 @click-left="onClickLeft">
7 <svg t="1575254700818"
8 class="icon"
9 viewBox="0 0 1024 1024"
10 version="1.1"
11 xmlns="http://www.w3.org/2000/svg"
12 p-id="1907"
13 width="32"
14 height="32"
15 slot="right">
16 <path d="M621.93259435 611.38542038L423.92102316 703.33559492c-9.52523406 4.42304387-20.93769289 0.2488718-25.36137327-9.27636225-4.42304387-9.52523406-0.2488718-20.93769289 9.27636226-25.36137326l198.01157118-91.95017455c9.52523406-4.42304387 20.93769289-0.2488718 25.36137327 9.27636226 4.42368037 9.52587056 0.2488718 20.93832939-9.27636225 25.36137326zM600.48824684 870.32029948l-189.07064485-109.15988242c-9.09495954-5.25113136-12.24054635-16.98884212-6.98941498-26.08443814 5.25113136-9.09495954 16.98884212-12.24054635 26.08443815-6.98941498l189.07064483 109.15988241c9.09495954 5.25113136 12.24054635 16.98884212 6.98941499 26.08443814-5.25113136 9.09559604-16.98884212 12.24054635-26.08443814 6.98941499z"
17 fill="#F9C73D"
18 p-id="1908"></path>
19 <path d="M358.28506354 712.46556199m-92.29261194 0a92.29261195 92.29261195 0 1 0 184.58522388 0 92.29261195 92.29261195 0 1 0-184.58522388 0Z"
20 fill="#FFEABB"
21 p-id="1909"></path>
22 <path d="M358.28506354 823.85319711c-61.419142 0-111.38763511-49.96849311-111.38763512-111.38763512s49.96849311-111.38763511 111.38763512-111.38763511 111.38763511 49.96849311 111.38763512 111.38763511-49.96849311 111.38763511-111.38763512 111.38763512z m1e-8-184.5852239c-40.36115047 0-73.19758879 32.83643833-73.19758879 73.19758877s32.83643833 73.19758879 73.19758879 73.1975888 73.19758879-32.83643833 73.1975888-73.19758879-32.83643833-73.19758879-73.1975888-73.19758878zM683.85520847 640.54097475c-50.89014624 0-92.29261195-41.40246571-92.29261196-92.29261196s41.40246571-92.29261195 92.29261196-92.29261194 92.29261195 41.40246571 92.29261195 92.29261194-41.40246571 92.29261195-92.29261195 92.29261195z m0-146.39517759c-29.83215469 0-54.10256563 24.27041094-54.10256564 54.10256563s24.27041094 54.10256563 54.10256564 54.10256564 54.10256563-24.27041094 54.10256562-54.10256564-24.27041094-54.10256563-54.10256562-54.10256563zM683.85520847 979.15938549c-50.89014624 0-92.29261195-41.40246571-92.29261196-92.29261195s41.40246571-92.29261195 92.29261196-92.29261195 92.29261195 41.40246571 92.29261195 92.29261195-41.40246571 92.29261195-92.29261195 92.29261196z m0-146.39517756c-29.83215469 0-54.10256563 24.27041094-54.10256564 54.10256561s24.27041094 54.10256563 54.10256564 54.10256564 54.10256563-24.27041094 54.10256562-54.10256564-24.27041094-54.10256563-54.10256562-54.10256561z"
23 fill="#F9C73D"
24 p-id="1910"></path>
25 </svg>
26 </van-nav-bar>
27 </div>
28 <template>
Когда я написал это в первый раз, и я не делал никакой инкапсуляции и не открывал исходный код, я получил много жалоб от моих друзей, что, черт возьми, WTFU, просто строка заголовка продукта, а затем, чтобы быть модным, я добавил иконку SVG в свой TM Написал мне более 30 строк кода, очень острая курица о(╥﹏╥)о
С тех пор я чувствовал, что это дело нельзя так ругать вечно, поэтому я погуглил, и оказалось, что есть проблема под названиемцветочные брюкиСтарший брат, который, как говорят, является старшим братом ByteDance, открыл исходный код очень впечатляющего решения для серверной части Vue.vue-element-admin, инкапсулирует множество полезных и практичных компонентов, в том числе схему инкапсуляции SVG, на которой основана эта статья, поэтому я прочитал исходный код от начала до конца и получил много пользы Спасибо♪(･ω･)ﾉ Я настоятельно рекомендую друзьям прочитать исходный код.
5. Инкапсуляция SVG
Шаг 1: Установите svg-sprite-loader
1npm install svg-sprite-loader --save
Шаг 2. Создайте SvgIcon и index.js в папке общедоступных компонентов компонентов и добавьте следующий код конфигурации компонента.
在index.js中
1<template>
2 <svg :class="svgClass"
3 aria-hidden="true"
4 v-on="$listeners">
5 <use :xlink:href="iconName" />
6 </svg>
7</template>
8<script>
9export default {
10 name: 'SvgIcon',
11 props: {
12 iconClass: {
13 type: String,
14 required: true
15 },
16 className: {
17 type: String,
18 default: ''
19 }
20 },
21 computed: {
22 iconName () {
23 return `#icon-${this.iconClass}`
24 },
25 svgClass () {
26 if (this.className) {
27 return 'svg-icon ' + this.className
28 } else {
29 return 'svg-icon'
30 }
31 }
32 }
33}
34</script>
35<style scoped>
36.svg-icon {
37 width: 1em;
38 height: 1em;
39 vertical-align: -0.15em;
40 fill: currentColor;
41 overflow: hidden;
42}
43</style>
Шаг 3: Создайте файл значка и подфайлы svg и index.js в каталоге src и настройте чтение файла svg из папки svg.
在index.js中
1import Vue from 'vue'
2import SvgIcon from '@/components/SvgIcon' // svg组件
3// 注册为全局组件
4Vue.component('svg-icon', SvgIcon)
5const req = require.context('./svg', false, /\.svg$/)
6const requireAll = requireContext => requireContext.keys().map(requireContext)
7requireAll(req)
Шаг 4. Настройте веб-страницу
существуетvue.config.jsДобавьте следующий код в:
1function resolve(dir)
2{
3 return path.join(__dirname, dir)
4}
5
6module.exports = {
7chainWebpack(config) {
8 // set svg-sprite-loader
9 config.module
10 .rule('svg')
11 .exclude.add(resolve('src/icons'))
12 .end()
13 config.module
14 .rule('icons')
15 .test(/\.svg$/)
16 .include.add(resolve('src/icons'))
17 .end()
18 .use('svg-sprite-loader')
19 .loader('svg-sprite-loader')
20 .options({
21 symbolId: 'icon-[name]'
22 })
23 .end()
24 }
25}
Шаг 5. Внесите глобальную иконку в main.js
1import './icons' // icon
Шаг 6: Поместите скопированный код значка svg в подфайл svg папки значков в src:
Шаг 7: Используйте глобальный компонент svg-icon
использовать при необходимостиsvgгде икона пройдена
1<svg-icon iconClass="backtotop"/>
iconClass - это то, что вы сохраняете в
iconВнизsvgпод файломsvgимя.
Это делается, хотя это немного хлопотно, но это метод раз и навсегда, а также это хороший способ улучшить силу и чтение кода, больше не нужно беспокоиться, есть большой участок кодаsvgПозорная сцена, когда большие парни распылили код~ Кайсен ^_^
В-четвертых, конец текста яйца 🌈
Я надеюсь, что мой забавный обмен в стиле B может помочь вам, распространять знания, делиться счастьем и добиваться прогресса вместе с вами~
Отсканируйте QR-код ниже, чтобы подписаться на мою личную общедоступную учетную запись WeChat.передний конец пончик, Вы также можете отсканировать мой приват WeChat, чтобы вытащить вас в группу.В группе есть старшие фронтенд-большие шишки, которые время от времени будут делиться интересными и полезными новыми знаниями в области фронтенда, ожидая, пока вы поиграете ~~
Связанное Чтение
Будущее должно быть жарким: внедрение технологии SVG Sprites
Прикоснитесь к своей руке, чтобы элегантно использовать значок