├── .gitignore
├── README.md
├── gridsome.config.js
├── package-lock.json
├── package.json
├── src
    ├── components
    │   ├── BuyButton.vue
    │   └── ProductPreview.vue
    ├── favicon.png
    ├── layouts
    │   └── Default.vue
    ├── main.js
    ├── pages
    │   ├── About.vue
    │   └── Index.vue
    ├── sources
    │   └── products
    │   │   └── index.js
    └── templates
    │   └── Product.vue
└── static
    └── logo.svg


/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .cache
3 | .DS_Store
4 | src/.temp
5 | node_modules
6 | dist
7 | .env
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Leveraging Vue.js & GraphQL with Gridsome (Airtable Database Example)
 2 | 
 3 | ![gridsome-demo](https://snipcart.com/media/203990/gridsome-airtable-tutorial.png)
 4 | 
 5 | Hard to argue against the fact that Vue.js and GraphQL have made significant waves in the ever-growing JS pond.
 6 | 
 7 | Now, what if I told you that the tool leveraging both to build powerful websites and apps has arrived? Yes, Vue.js finally found its Gatsby, and it’s called Gridsome.
 8 | 
 9 | It quickly caught the attention of our team and here I’m putting it to the test by building my own Vue & GraphQL-powered e-commerce app.This tutorial will highlight some of Gridsome’s neat features while using Airtable as a handcrafted database.
10 | 
11 | Steps:
12 | 
13 | - Creating a Gridsome project
14 | - Handling a products sheet in Airtable
15 | - Crafting a Gridsome data source plugin to fetch products from Airtable
16 | - Querying data with GraphQL
17 | - Building Vue.js views & listing
18 | - Adding the buy button
19 | 
20 | > Read the full tutorial [here](https://snipcart.com/blog/vuejs-graphql-airtable-example)
21 | 
22 | > See the live demo [here](https://snipcart-gridsome-airtable.netlify.com/)
23 | 
24 | Enjoy folks!
25 | 


--------------------------------------------------------------------------------
/gridsome.config.js:
--------------------------------------------------------------------------------
 1 | // This is where project configuration and installed plugin options are located. 
 2 | // Learn more: https://gridsome.org/docs/config
 3 | 
 4 | require('dotenv').config();
 5 | 
 6 | module.exports = {
 7 |   plugins: [
 8 |     {
 9 |       use: '~/src/sources/products',
10 |       options: {
11 |         apiKey: process.env.AIRTABLE_KEY,
12 |         base: process.env.AIRTABLE_BASE,
13 |       },
14 |     },
15 |   ],
16 | };
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "snipcart-gridsome-airtable-demo",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "gridsome build",
 6 |     "develop": "gridsome develop",
 7 |     "explore": "gridsome explore"
 8 |   },
 9 |   "dependencies": {
10 |     "airtable": "^0.5.8",
11 |     "dotenv": "^6.2.0",
12 |     "gridsome": "^0.4.0"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/BuyButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <button class="snipcart-add-item"
 3 |         :data-item-id="product.id"
 4 |         :data-item-name="product.title"
 5 |         :data-item-description="excerpt"
 6 |         :data-item-image="image.url"
 7 |         :data-item-price="product.price"
 8 |         :data-item-url="'https://snipcart-gridsome-airtable.netlify.com' + product.path">
 9 |         <slot>
10 |             Buy for {{ product.price }}$
11 |         </slot>
12 |     </button>
13 | </template>
14 | 
15 | <script>
16 | 
17 | function makeExcerpt(str, len) {
18 |     var words = str.substr(0, len).split(' ');
19 |     return words.slice(0, words.length - 1).join(' ') + '…';
20 | }
21 | 
22 | export default {
23 |     name: 'ProductPreview',
24 |     props: ['product'],
25 |     data() {
26 |         return {
27 |             excerpt: makeExcerpt(this.product.content, 125),
28 |             image: this.product.picture.length ? {
29 |                 name: this.product.picture[0].filename,
30 |                 url: this.product.picture[0].thumbnails.large.url.src,
31 |             } : null,
32 |         };
33 |     }
34 | };
35 | </script>
36 | 
37 | <style scoped>
38 | button {
39 |     background-color: #E3E3E3;
40 |     border: 0;
41 |     font-family: inherit;
42 |     font-size: inherit;
43 |     border-radius: .2em;
44 |     padding: .4em;
45 | }
46 | 
47 | button:hover {
48 |     background-color: hsla(152, 65%, 80%, 1);
49 |     cursor: pointer;
50 | }
51 | </style>
52 | 
53 | 


--------------------------------------------------------------------------------
/src/components/ProductPreview.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <article>
 3 |         <g-link :to="product.path">
 4 |             <figure v-if="image">
 5 |                 <img :src="image.url" :alt=image.name />
 6 |             </figure>
 7 |             <h2>{{product.title}}</h2>
 8 |         </g-link>
 9 |         <p class="btn-line">
10 |             <BuyButton :product="product" />
11 |         <p>{{excerpt}}</p>
12 |     </article>
13 | </template>
14 | 
15 | <script>
16 | 
17 | import BuyButton from './BuyButton'
18 | 
19 | function makeExcerpt(str, len) {
20 |     var words = str.substr(0, len).split(' ');
21 |     return words.slice(0, words.length - 1).join(' ') + '…';
22 | }
23 | 
24 | export default {
25 |     name: 'ProductPreview',
26 |     props: ['product'],
27 |     components: {
28 |         BuyButton,
29 |     },
30 |     data() {
31 |         return {
32 |             excerpt: makeExcerpt(this.product.content, 125),
33 |             image: this.product.picture.length ? {
34 |                 name: this.product.picture[0].filename,
35 |                 url: this.product.picture[0].thumbnails.large.url.src,
36 |             } : null,
37 |         };
38 |     }
39 | };
40 | </script>
41 | 
42 | <style scoped>
43 | 
44 | article {
45 |     display: flex;
46 |     flex-direction: column;
47 | }
48 | 
49 | figure {
50 |     height: 10em;
51 |     display: flex;
52 |     align-items: center;
53 |     justify-content: center;
54 | }
55 | 
56 | h2 {
57 |     font-size: 1em;
58 | }
59 | 
60 | .btn-line {
61 |     margin: 0;
62 | }
63 | 
64 | </style>
65 | 
66 | 


--------------------------------------------------------------------------------
/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/snipcart/gridsome-graphql-snipcart/2c2e6337bb3aa11a3169db4f54debf111a4d1301/src/favicon.png


--------------------------------------------------------------------------------
/src/layouts/Default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="layout">
 3 |     <header class="header">
 4 |       <g-link :to="{ name: 'home' }" class="home-btn">Furniture Store</g-link>
 5 |     </header>
 6 |     <section class="content">
 7 |       <slot />
 8 |     </section>
 9 |     <footer>
10 |       <p>Made with a few ☕️ at <a href="https://snipcart.com/">Snipcart</a></p>
11 |       <p>
12 |         Read our 
13 |           <a href="https://snipcart.com/blog/vuejs-graphql-airtable-example">
14 |             blog post on Gridsome and Airtable
15 |           </a> or go see
16 |           <a href="https://github.com/snipcart/snipcart-gridsome-airtable">
17 |             the demo's repo
18 |           </a>
19 |       </p>
20 |     </footer>
21 |   </div>
22 | </template>
23 | 
24 | <style>
25 | body {
26 |   font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
27 |   margin:0;
28 |   padding:0;
29 |   line-height: 1.5;
30 | }
31 | 
32 | html, body, .layout {
33 |   margin: 0;
34 |   min-height: 100vh;
35 | }
36 | 
37 | .layout {
38 |   max-width: 600px;
39 |   margin: 0 auto;
40 |   padding-left: 20px;
41 |   padding-right: 20px;
42 | 
43 |   display: flex;
44 |   flex-direction: column;
45 | }
46 | 
47 | .content {
48 |   flex: 1;
49 | }
50 | 
51 | .header {
52 |   display: flex;
53 |   justify-content: space-between;
54 |   align-items: center;
55 |   margin-bottom: 20px;
56 |   height: 80px;
57 | }
58 | 
59 | .home-btn {
60 |   text-decoration: none;
61 |   color: #4cba86;
62 |   font-size: 2.8em;
63 |   line-height: 1em;
64 | }
65 | 
66 | .home-btn:before {
67 |   background-image: url('/logo.svg');
68 |   content: "";
69 |   width: 0.8em;
70 |   height: 0.8em;
71 |   display: inline-block;
72 |   background-position: center;
73 |   position: relative;
74 |   top: 2px;
75 | }
76 | 
77 | .nav__link {
78 |   margin-left: 20px;
79 | }
80 | 
81 | a {
82 |   text-decoration: none;
83 |   color: #4cba86;
84 | }
85 | 
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import DefaultLayout from '~/layouts/Default.vue'
 2 | 
 3 | export default function (Vue, { head, router, isServer }) {
 4 |   Vue.component('Layout', DefaultLayout)
 5 | 
 6 |   head.link.push({
 7 |     rel: 'stylesheet',
 8 |     href: 'https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css'
 9 |   });
10 | 
11 |   head.script.push({
12 |     type: 'text/javascript',
13 |     src: 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js',
14 |     body: true,
15 |   });
16 | 
17 |   head.script.push({
18 |     type: 'text/javascript',
19 |     src: 'https://cdn.snipcart.com/scripts/2.0/snipcart.js',
20 |     body: true,
21 | 
22 |     // snipcart's attributes
23 |     id: 'snipcart',
24 |     'data-api-key': 'MzMxN2Y0ODMtOWNhMy00YzUzLWFiNTYtZjMwZTRkZDcxYzM4',
25 |   });
26 | 
27 |   head.titleTemplate = "%s – Snipcart's Furniture Store";
28 | }
29 | 


--------------------------------------------------------------------------------
/src/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <h1>About us</h1>
 4 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.</p>
 5 |   </Layout>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   metaInfo: {
11 |     title: 'About',
12 |   },
13 | };
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/pages/Index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Layout>
  3 |     <section class="products">
  4 |       <ProductPreview 
  5 |         v-for="edge in $page.allProduct.edges" :key="edge.node.id"
  6 |         :product="edge.node" class="product" />
  7 |     </section>
  8 |     <Pager :info="$page.allProduct.pageInfo" class="product-navigation" />
  9 |   </Layout>
 10 | </template>
 11 | 
 12 | <style>
 13 | .product-navigation {
 14 |   display: flex;
 15 |   justify-content: center;
 16 |   flex: 0 1 auto;
 17 | }
 18 | 
 19 | .product-navigation a {
 20 |   box-sizing: border-box;
 21 |   width: 2em;
 22 |   background-color: #E3E3E3;
 23 |   color: black;
 24 |   font-weight: bold;
 25 |   margin: .5em;
 26 |   text-align: center;
 27 |   text-decoration: none;
 28 |   border-radius: .2em;
 29 | }
 30 | 
 31 | .product-navigation a.active {
 32 |   font-weight: normal;
 33 |   background-color: hsla(152, 65%, 80%, 1);
 34 | }
 35 | 
 36 | .products {
 37 |   display: flex;
 38 |   flex-wrap: wrap;
 39 | }
 40 | 
 41 | .products figure, .products img {
 42 |   width: 100%;
 43 |   margin: 0;
 44 | }
 45 | 
 46 | .products a {
 47 |   color: inherit;
 48 | }
 49 | 
 50 | .products .product {
 51 |   display: block;
 52 |   width: 10em;
 53 |   margin: 1em;
 54 | }
 55 | 
 56 | .product button {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | </style>
 61 | 
 62 | 
 63 | <script>
 64 | import { Pager } from 'gridsome'
 65 | import ProductPreview from '../components/ProductPreview'
 66 | 
 67 | export default {
 68 |     components: {
 69 |         Pager,
 70 |         ProductPreview,
 71 |     },
 72 |     metaInfo: {
 73 |       titleTemplate: "Snipcart's Furniture Store"
 74 |     }
 75 | };
 76 | </script>
 77 | 
 78 | <page-query>
 79 | query Products($page: Int) {
 80 |   allProduct (perPage: 6, page: $page) @paginate {
 81 |     pageInfo {
 82 |       totalPages
 83 |       currentPage
 84 |     }
 85 |     edges {
 86 |       node{
 87 |         id,
 88 |         title,
 89 |         path,
 90 |         price,
 91 |         content,
 92 |         picture {
 93 |           thumbnails {
 94 |              large{
 95 |               url
 96 |             }
 97 |           }
 98 |         }
 99 |       }
100 |     }
101 |   }
102 | }
103 | </page-query>


--------------------------------------------------------------------------------
/src/sources/products/index.js:
--------------------------------------------------------------------------------
 1 | const Airtable = require('airtable');
 2 | 
 3 | module.exports = function (api, opts) {
 4 |     const base = new Airtable({apiKey: opts.apiKey}).base(opts.base);
 5 |     api.loadSource(async store => {
 6 |         const contentType = store.addContentType({
 7 |             typeName: 'Product',
 8 |             route: '/products/:slug',
 9 |         });
10 | 
11 |         contentType.addSchemaField('price', ({ graphql }) => ({
12 |                 type: graphql.GraphQLFloat,
13 |                 resolve (node) {
14 |                     return node.fields.unitCost;
15 |                 }
16 |             }));
17 | 
18 |         await base('Furniture').select().eachPage((records, fetchNextPage) => {
19 |             records.forEach((record) => {
20 |                 const item = record._rawJson;
21 |                 contentType.addNode({
22 |                     id: item.id,
23 |                     title: item.fields.Name,
24 |                     fields: item.fields,
25 |                     content: item.fields.Description,
26 |                 });
27 |                 console.log('Retrieved', record.get('Name'));
28 |             });
29 | 
30 |             fetchNextPage();
31 |         });
32 |     });
33 | };
34 | 


--------------------------------------------------------------------------------
/src/templates/Product.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Layout>
  3 |       <section class="main">
  4 |         <aside>
  5 |             <figure>
  6 |                 <img :src="$page.product.picture[selected].thumbnails.large.url.src"
  7 |                     alt="Product Image" class="img-main" />
  8 |             </figure>
  9 |             <p>
 10 |                 <img v-for="(img, index) in $page.product.picture"
 11 |                     :key="img.thumbnails.large.url.src"
 12 |                     @click="select(index)"
 13 |                     :src="img.thumbnails.large.url.src"
 14 |                     class="img-preview"
 15 |                     :class="{active: index == selected}" />
 16 |             </p>
 17 |         </aside>
 18 |         <h1>{{$page.product.title}}</h1>
 19 |         <buy-button :product="$page.product" />
 20 |         <p>{{$page.product.content}}</p>
 21 |       </section>
 22 |   </Layout>
 23 | </template>
 24 | 
 25 | <style scoped>
 26 | 
 27 | aside {
 28 |     width: 20em;
 29 |     float: left;
 30 |     margin-right: 1em;
 31 | }
 32 | 
 33 | figure, .img-main {
 34 |     display: block;
 35 |     width: 100%;
 36 |     margin: 0;
 37 | }
 38 | 
 39 | figure {
 40 |     height: 20em;
 41 |     display: flex;
 42 |     align-items: center;
 43 |     justify-content: center;
 44 | }
 45 | 
 46 | .img-preview {
 47 |     width: 4em;
 48 |     box-sizing: border-box;
 49 |     border: 2px solid black;
 50 |     margin: .5em;
 51 | }
 52 | 
 53 | .img-preview.active {
 54 |     border: 2px solid hsla(152, 65%, 80%, 1);
 55 | }
 56 | 
 57 | </style>
 58 | 
 59 | 
 60 | 
 61 | <script>
 62 | import BuyButton from '../components/BuyButton';
 63 | import { debug } from 'util';
 64 | 
 65 | export default {
 66 |     components: {
 67 |         BuyButton,
 68 |     },
 69 |     data() {
 70 |         return {
 71 |             selected: 0,
 72 |         };
 73 |     },
 74 |     metaInfo () {
 75 |         return {
 76 |             title: this.$page.product.title,
 77 |         };
 78 |     },
 79 |     methods: {
 80 |         select(index) {
 81 |             this.selected = index;
 82 |         } 
 83 |     }
 84 | }
 85 | </script>
 86 | 
 87 | <page-query>
 88 | query Product ($path: String!) {
 89 |   product(path: $path) {
 90 |     id,
 91 |     title,
 92 |     path,
 93 |     price,
 94 |     content,
 95 |     picture {
 96 |       thumbnails {
 97 |          large{
 98 |           url
 99 |         }
100 |       }
101 |     }
102 |   }
103 | }
104 | </page-query>


--------------------------------------------------------------------------------
/static/logo.svg:
--------------------------------------------------------------------------------
1 | <svg fill="#4CBA86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><g><g><g><path d="M35,60.5H1c-0.553,0-1-0.447-1-1v-55c0-0.553,0.447-1,1-1h34c0.553,0,1,0.447,1,1v55C36,60.053,35.553,60.5,35,60.5z      M2,58.5h32v-53H2V58.5z"></path></g><g><path d="M18,60.5c-0.553,0-1-0.447-1-1v-55c0-0.553,0.447-1,1-1s1,0.447,1,1v55C19,60.053,18.553,60.5,18,60.5z"></path></g><g><path d="M12,35.5c-0.553,0-1-0.447-1-1v-4c0-0.553,0.447-1,1-1s1,0.447,1,1v4C13,35.053,12.553,35.5,12,35.5z"></path></g><g><g><path d="M63,60.5c-0.553,0-1-0.447-1-1v-35c0-0.553,0.447-1,1-1s1,0.447,1,1v35C64,60.053,63.553,60.5,63,60.5z"></path></g><g><path d="M60,60.5c-0.553,0-1-0.447-1-1v-35c0-0.553,0.447-1,1-1s1,0.447,1,1v35C61,60.053,60.553,60.5,60,60.5z"></path></g><g><path d="M63,25.5h-3c-0.553,0-1-0.447-1-1s0.447-1,1-1h3c0.553,0,1,0.447,1,1S63.553,25.5,63,25.5z"></path></g><g><path d="M63,60.5h-3c-0.553,0-1-0.447-1-1s0.447-1,1-1h3c0.553,0,1,0.447,1,1S63.553,60.5,63,60.5z"></path></g><g><path d="M49,60.5c-0.553,0-1-0.447-1-1v-13c0-0.553,0.447-1,1-1s1,0.447,1,1v13C50,60.053,49.553,60.5,49,60.5z"></path></g><g><path d="M46,60.5c-0.553,0-1-0.447-1-1v-13c0-0.553,0.447-1,1-1s1,0.447,1,1v13C47,60.053,46.553,60.5,46,60.5z"></path></g><g><path d="M49,60.5h-3c-0.553,0-1-0.447-1-1s0.447-1,1-1h3c0.553,0,1,0.447,1,1S49.553,60.5,49,60.5z"></path></g><g><path d="M60,47.5H45c-0.553,0-1-0.447-1-1s0.447-1,1-1h15c0.553,0,1,0.447,1,1S60.553,47.5,60,47.5z"></path></g><g><path d="M60,44.5H45c-0.553,0-1-0.447-1-1s0.447-1,1-1h15c0.553,0,1,0.447,1,1S60.553,44.5,60,44.5z"></path></g><g><path d="M45,47.5c-0.553,0-1-0.447-1-1v-3c0-0.553,0.447-1,1-1s1,0.447,1,1v3C46,47.053,45.553,47.5,45,47.5z"></path></g></g><g><g><path d="M39,60.5c-0.553,0-1-0.447-1-1v-35c0-0.553,0.447-1,1-1s1,0.447,1,1v35C40,60.053,39.553,60.5,39,60.5z"></path></g><g><path d="M42,60.5c-0.553,0-1-0.447-1-1v-35c0-0.553,0.447-1,1-1s1,0.447,1,1v35C43,60.053,42.553,60.5,42,60.5z"></path></g><g><path d="M42,60.5h-3c-0.553,0-1-0.447-1-1s0.447-1,1-1h3c0.553,0,1,0.447,1,1S42.553,60.5,42,60.5z"></path></g><g><path d="M42,25.5h-3c-0.553,0-1-0.447-1-1s0.447-1,1-1h3c0.553,0,1,0.447,1,1S42.553,25.5,42,25.5z"></path></g><g><path d="M53,38.5c-0.553,0-1-0.447-1-1v-13c0-0.553,0.447-1,1-1s1,0.447,1,1v13C54,38.053,53.553,38.5,53,38.5z"></path></g><g><path d="M56,38.5c-0.553,0-1-0.447-1-1v-13c0-0.553,0.447-1,1-1s1,0.447,1,1v13C57,38.053,56.553,38.5,56,38.5z"></path></g><g><path d="M56,25.5h-3c-0.553,0-1-0.447-1-1s0.447-1,1-1h3c0.553,0,1,0.447,1,1S56.553,25.5,56,25.5z"></path></g><g><path d="M57,38.5H42c-0.553,0-1-0.447-1-1s0.447-1,1-1h15c0.553,0,1,0.447,1,1S57.553,38.5,57,38.5z"></path></g><g><path d="M57,41.5H42c-0.553,0-1-0.447-1-1s0.447-1,1-1h15c0.553,0,1,0.447,1,1S57.553,41.5,57,41.5z"></path></g><g><path d="M57,41.5c-0.553,0-1-0.447-1-1v-3c0-0.553,0.447-1,1-1s1,0.447,1,1v3C58,41.053,57.553,41.5,57,41.5z"></path></g></g><g><path d="M35,16.5H18c-0.553,0-1-0.447-1-1s0.447-1,1-1h17c0.553,0,1,0.447,1,1S35.553,16.5,35,16.5z"></path></g><g><path d="M35,27.5H18c-0.553,0-1-0.447-1-1s0.447-1,1-1h17c0.553,0,1,0.447,1,1S35.553,27.5,35,27.5z"></path></g><g><path d="M35,38.5H18c-0.553,0-1-0.447-1-1s0.447-1,1-1h17c0.553,0,1,0.447,1,1S35.553,38.5,35,38.5z"></path></g><g><path d="M35,49.5H18c-0.553,0-1-0.447-1-1s0.447-1,1-1h17c0.553,0,1,0.447,1,1S35.553,49.5,35,49.5z"></path></g><g><path d="M63,22.5H39c-0.553,0-1-0.447-1-1v-17c0-0.553,0.447-1,1-1h24c0.553,0,1,0.447,1,1v17C64,22.053,63.553,22.5,63,22.5z      M40,20.5h22v-15H40V20.5z"></path></g><g><path d="M48.999,22.5c-0.19,0-0.383-0.055-0.554-0.168c-0.46-0.307-0.584-0.927-0.277-1.387l6-9     c0.306-0.46,0.925-0.583,1.387-0.277c0.46,0.307,0.584,0.927,0.277,1.387l-6,9C49.64,22.344,49.322,22.5,48.999,22.5z"></path></g><g><path d="M61.001,22.5c-0.323,0-0.641-0.156-0.833-0.445l-6-9c-0.307-0.46-0.183-1.08,0.277-1.387     c0.461-0.306,1.081-0.183,1.387,0.277l6,9c0.307,0.46,0.183,1.08-0.277,1.387C61.384,22.445,61.191,22.5,61.001,22.5z"></path></g><g><path d="M43.999,22.5c-0.19,0-0.383-0.055-0.554-0.168c-0.46-0.307-0.584-0.927-0.277-1.387l4-6     c0.306-0.46,0.925-0.584,1.387-0.277c0.46,0.307,0.584,0.927,0.277,1.387l-4,6C44.64,22.344,44.322,22.5,43.999,22.5z"></path></g><g><path d="M50.501,20.25c-0.323,0-0.641-0.156-0.833-0.445l-2.5-3.75c-0.307-0.46-0.183-1.08,0.277-1.387s1.08-0.183,1.387,0.277     l2.5,3.75c0.307,0.46,0.183,1.08-0.277,1.387C50.884,20.195,50.691,20.25,50.501,20.25z"></path></g><g><path d="M44.5,12.5c-1.379,0-2.5-1.121-2.5-2.5s1.121-2.5,2.5-2.5S47,8.621,47,10S45.879,12.5,44.5,12.5z M44.5,9.5     C44.225,9.5,44,9.725,44,10s0.225,0.5,0.5,0.5S45,10.275,45,10S44.775,9.5,44.5,9.5z"></path></g></g></g></svg>


--------------------------------------------------------------------------------