refactor: update example views

src/views/icons/Flags.vue

@@ -3,19 +3,14 @@
     <CCol>
       <CCard>
         <CCardHeader>
-          <strong>Vue Flags</strong>
+          <strong>Vue CoreUI Flag Icons</strong>
         </CCardHeader>
         <CCardBody>
           <CRow class="text-center">
-            <!-- For using the flags inline with text add the classes
-                        <code>.flag-icon</code> and <code>.flag-icon-xx</code>
-                        (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
-                        span. If you want to have a squared version flag then add the class
-                        flag-icon-squared as well. -->
-            <template v-for="(flag, flagName) in flagSet" :key="flagName">
-              <CCol class="mb-5" col="3" sm="2">
-                <CIcon size="lg" :content="flag" />
-                <div>{{ toKebabCase(flagName) }}</div>
+            <template v-for="(icon, iconName) in icons" :key="iconName">
+              <CCol class="mb-5" :xs="3" :sm="2">
+                <CIcon :content="icon" size="xxl" />
+                <div>{{ toKebabCase(iconName) }}</div>
               </CCol>
             </template>
           </CRow>
@@ -28,16 +23,15 @@
 <script>
 import { flagSet } from '@coreui/icons'
 export default {
-  name: 'Flags',
-  data: function () {
+  name: 'CoreUIIcons',
+  setup() {
+    const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+    const icons = flagSet
+
     return {
-      flagSet: flagSet,
+      icons,
+      toKebabCase
     }
-  },
-  methods: {
-    toKebabCase(str) {
-      return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    },
-  },
+  }
 }
 </script>