fix: Using cdn github to svg icons

package.json

@@ -23,7 +23,7 @@
     "test:unit": "jest",
     "test:e2e": "node_modules/.bin/cypress run --headless",
     "test:e2e:open": "node_modules/.bin/cypress open ",
-    "project:publish": "git push --tags origin master && npm run build && npm publish --access public"
+    "project:publish": "git push --tags origin master && npm run build && npm publish"
   },
   "repository": {
     "type": "git",
@@ -73,7 +73,6 @@
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-terser": "^6.1.0",
     "rollup-plugin-vue": "^5.1.9",
-    "rollup-plugin-vue-inline-svg": "^1.1.1",
     "standard-version": "^8.0.0",
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11",

rollup.config.dev.js

@@ -4,7 +4,6 @@ import commonjs from '@rollup/plugin-commonjs'
 import chokidar from 'chokidar'
 import { eslint } from 'rollup-plugin-eslint'
 import vue from 'rollup-plugin-vue'
-import svg from 'rollup-plugin-vue-inline-svg'
 
 export default {
   input: 'src/index.js',
@@ -15,10 +14,8 @@ export default {
   plugins: [
     commonjs(),
     resolve(),
-    svg(),
     eslint({
-      include: './src/**',
-      exclude: ['node_modules/**', 'src/icons/**']
+      include: './src/**'
     }),
     vue({
       css: true,

rollup.config.prod.js

@@ -3,15 +3,13 @@ import commonjs from '@rollup/plugin-commonjs'
 import replace from '@rollup/plugin-replace'
 import { terser } from 'rollup-plugin-terser'
 import vue from 'rollup-plugin-vue'
-import svg from 'rollup-plugin-vue-inline-svg'
 
 export default commandLineArgs => {
   return {
     input: 'src/index.js',
     external: ['vue-focus-lock'],
     plugins: [
       commonjs(),
-      svg(),
       replace({
         'process.env.NODE_ENV': JSON.stringify('production')
       }),

src/ListChat.vue

@@ -19,7 +19,7 @@
           >
           <span
             class="vsc-popup-body__link-avatar-brand"
-            :style="attendant.app ? `background-image: url(https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/logos/${attendant.app}.png)` : ''"
+            :style="attendant.app ? `background-image: url(${props.urlAsset}/logos/${attendant.app}.png)` : ''"
           />
         </div>
         <div class="vsc-popup-body__link-info">
@@ -42,6 +42,7 @@ export default {
   name: 'ListChat',
 
   props: {
+    urlAsset: String,
     attendants: {
       type: Array,
       default: () => ([])

src/SocialChat.vue

@@ -7,9 +7,7 @@
       <div
         id="vsc-popup-box"
         class="vsc-popup-box"
-        :class="{
-          'vsc-popup-box--show': show
-        }"
+        :class="{ 'vsc-popup-box--show': show }"
       >
         <div
           v-show="$slots.header"
@@ -19,7 +17,10 @@
         </div>
         <div class="vsc-popup-body">
           <slot name="body">
-            <ListChat :attendants="attendants" />
+            <ListChat
+              :url-asset="urlAssets"
+              :attendants="attendants"
+            />
           </slot>
         </div>
         <div
@@ -31,9 +32,7 @@
       </div>
       <button
         class="vsc-popup-button vsc-popup-button--default"
-        :class="{
-          'vsc-popup-button--no-icon': !icon
-        }"
+        :class="{ 'vsc-popup-button--no-icon': !icon }"
         aria-haspopup="true"
         aria-controls="vsc-popup-box"
         aria-expanded="false"
@@ -46,28 +45,34 @@
             name="icon"
             :open="show"
           >
-            <chatIcon />
+            <img
+              :src="`${urlAssets}/icons/chat.svg`"
+              alt="chat icon"
+              aria-hidden="true"
+            >
           </slot>
         </span>
-        <closeIcon v-show="show && icon" />
+        <img
+          v-show="show && icon"
+          :src="`${urlAssets}/icons/close.svg`"
+          alt="close icon"
+          aria-hidden="true"
+        >
       </button>
     </div>
   </FocusLock>
 </template>
 
 <script>
-import chatIcon from './icons/chat.svg'
-import closeIcon from './icons/close.svg'
 import ListChat from './ListChat.vue'
 import FocusLock from 'vue-focus-lock'
+import { URL_ASSETS } from './constants'
 
 export default {
   name: 'VueSocialChat',
 
   components: {
-    chatIcon,
     ListChat,
-    closeIcon,
     FocusLock
   },
 
@@ -83,7 +88,8 @@ export default {
   },
 
   data: () => ({
-    show: false
+    show: false,
+    urlAssets: URL_ASSETS
   }),
 
   computed: {

src/constants.js

@@ -0,0 +1 @@
+export const URL_ASSETS = 'https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/'