### Installing Dependencies for SCUI Documentation (npm)

Source: https://github.com/shenxgan/scui/blob/main/docs/README.md

This command installs all necessary project dependencies listed in the 'package.json' file. It is a prerequisite for running or building the documentation and ensures all required modules are available.

```Shell
npm i
```

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

### Running SCUI Documentation in Development Mode (npm)

Source: https://github.com/shenxgan/scui/blob/main/docs/README.md

This command starts a local development server for the SCUI documentation, allowing real-time preview and development. It typically watches for file changes and automatically reloads the browser upon modifications.

```Shell
npm run docs:dev
```

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

### Example Custom SVG Icon Component (Vue)

Source: https://github.com/shenxgan/scui/blob/main/docs/docs/guide/iconfont.md

This snippet provides an example of a custom SVG icon component defined as a Vue single-file component. It demonstrates embedding raw SVG code directly within the `<template>` section, which is then registered and used as a Vue component.

```html
// @/assets/icons/Code.vue

<template>
	<svg t="1637029965066" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4502" width="200" height="200"><path d="M981.333333 512l-301.696 301.696-60.330666-60.330667L860.672 512l-241.365333-241.365333 60.330666-60.330667L981.333333 512zM163.328 512l241.365333 241.365333-60.330666 60.330667L42.666667 512l301.696-301.696 60.330666 60.330667L163.328 512z" p-id="4503"></path></svg>
</template>
```

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

### Dynamically Loading Configuration Script (JavaScript)

Source: https://github.com/shenxgan/scui/blob/main/public/index.html

This JavaScript snippet dynamically injects a <script> tag into the HTML document. It loads 'config.js' with a cache-busting query parameter (current timestamp) to ensure the latest version is always fetched, which is crucial for application-specific configurations.

```JavaScript
document.write("<script src='config.js?"+new Date().getTime()+"'><\/script>");
```

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

### Building SCUI Documentation for Production (npm)

Source: https://github.com/shenxgan/scui/blob/main/docs/README.md

This command compiles and optimizes the SCUI documentation into static files suitable for deployment to a production environment. The generated output is typically found in a 'dist' or 'build' directory.

```Shell
npm run docs:build
```

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

### Styling Application Loading Screen (CSS)

Source: https://github.com/shenxgan/scui/blob/main/public/index.html

This CSS block defines the visual presentation of the application's loading screen. It includes styles for positioning, layout using flexbox, the application logo, a circular loading animation, and specific adjustments for dark mode to ensure consistent branding and user experience.

```CSS
.app-loading {position: absolute;top:0px;left:0px;right:0px;bottom:0px;display: flex;justify-content: center;align-items: center;flex-direction: column;background: #fff;} .app-loading__logo {margin-bottom: 30px;} .app-loading__logo img {width: 90px;vertical-align: bottom;} .app-loading__loader {box-sizing: border-box;width: 35px;height: 35px;border: 5px solid transparent;border-top-color: #000;border-radius: 50%;animation: .5s loader linear infinite;position: relative;} .app-loading__loader:before {box-sizing: border-box;content: '';display: block;width: inherit;height: inherit;position: absolute;top: -5px;left: -5px;border: 5px solid #ccc;border-radius: 50%;opacity: .5;} .app-loading__title {font-size: 24px;color: #333;margin-top: 30px;} .dark .app-loading {background: #222225;} .dark .app-loading__loader {border-top-color: #fff;} .dark .app-loading__title {color: #d0d0d0;} @keyframes loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
```

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

### Checking Browser Compatibility and Version (JavaScript)

Source: https://github.com/shenxgan/scui/blob/main/public/index.html

This set of JavaScript functions (`getBrowerInfo`, `indexOf`, `isSatisfyBrower`) detects the user's browser type and version from the user agent string. It then compares the detected version against a set of minimum requirements for various browsers. If the current browser does not meet the minimum version, a warning message is displayed by updating specific DOM elements.

```JavaScript
function getBrowerInfo(){ var userAgent = window.navigator.userAgent; var browerInfo = { type: 'unknown', version: 'unknown', userAgent: userAgent }; if(document.documentMode){ browerInfo.type = "IE"; browerInfo.version = document.documentMode + ''; }else if(indexOf(userAgent, "Firefox")){ browerInfo.type = "Firefox"; browerInfo.version = userAgent.match(/Firefox\/(\[\\d.\]+)/)[1]; }else if(indexOf(userAgent, "Opera")){ browerInfo.type = "Opera"; browerInfo.version = userAgent.match(/Opera\/(\[\\d.\]+)/)[1]; }else if(indexOf(userAgent, "Edg")){ browerInfo.type = "Edg"; browerInfo.version = userAgent.match(/Edg\/(\[\\d.\]+)/)[1]; }else if(indexOf(userAgent, "Chrome")){ browerInfo.type = "Chrome"; browerInfo.version = userAgent.match(/Chrome\/(\[\\d.\]+)/)[1]; }else if(indexOf(userAgent, "Safari")){ browerInfo.type = "Safari"; browerInfo.version = userAgent.match(/Safari\/(\[\\d.\]+)/)[1]; } return browerInfo; } function indexOf(userAgent, brower) { return userAgent.indexOf(brower) > -1; } function isSatisfyBrower(){ var minVer = { "Chrome": 71, "Firefox": 65, "Safari": 12, "Edg": 97, "IE": 999 }; var browerInfo = getBrowerInfo(); var materVer = browerInfo.version.split('.')[0]; return materVer >= minVer[browerInfo.type]; } if(!isSatisfyBrower()){ document.getElementById('versionCheck').style.display = 'block'; document.getElementById('versionCheck-type').innerHTML = getBrowerInfo().type; document.getElementById('versionCheck-version').innerHTML = getBrowerInfo().version; }
```

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

### Applying Dark Mode from Local Storage (JavaScript)

Source: https://github.com/shenxgan/scui/blob/main/public/index.html

This JavaScript code checks the browser's localStorage for a key named 'APP_DARK'. If this key exists, it indicates that dark mode was previously enabled by the user, and the 'dark' class is then added to the <html> element, triggering corresponding CSS styles for a dark theme.

```JavaScript
var dark = window.localStorage.getItem('APP_DARK'); if(dark){ document.documentElement.classList.add("dark") }
```

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

### Using the Print Utility in JavaScript

Source: https://github.com/shenxgan/scui/blob/main/docs/docs/vab/print.md

This snippet demonstrates how to import and use the print utility. It supports printing elements referenced by `this.$refs` or directly printing HTML strings. It's designed for local or global use, retaining styles, ignoring elements, and handling pagination.

```JavaScript
import print from '@/utils/print'

//局部调用
print(this.$refs[ref])

//支持直接传入HTML字符串
print("<div></div>")
```

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

### Using Element Plus Icons in HTML

Source: https://github.com/shenxgan/scui/blob/main/docs/docs/guide/iconfont.md

This snippet demonstrates how to use a standard Element Plus icon component within an `el-icon` wrapper. It shows the basic structure for rendering pre-defined icons provided by `@element-plus/icons`.

```html
<el-icon>
	<el-icon-chat-dot-round />
</el-icon>
```

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

### Different Ways to Use Custom Icons in HTML

Source: https://github.com/shenxgan/scui/blob/main/docs/docs/guide/iconfont.md

This snippet illustrates three different methods for integrating custom `sc-icon-*` components into an HTML template. It shows usage within an `el-button`'s `icon` prop, as a direct child of `el-icon`, and dynamically via the `<component>` tag with `is` binding.

```html
<el-button icon="sc-icon-bug-fill"></el-button>
<el-icon><sc-icon-bug-fill /></el-icon>
<el-icon><component is="sc-icon-bug-fill" /></el-icon>
```

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

### Recommended Icon Directory Structure

Source: https://github.com/shenxgan/scui/blob/main/docs/docs/guide/iconfont.md

This snippet illustrates the recommended directory structure for custom SVG icon components. It shows that individual icon components (`.vue` files) should reside within the `icons` directory alongside an `index.js` file for exporting them.

```sh
#@/assets/icons

┌── icons
│	├── index.js
│	├── 图标单文件组件.vue
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.